Hosting Solutions
mobile_logo Table of Contents
seal_frontseal_back

Hover Makes CMS Option Buttons Appear Tutorial

Learn to use CSS and HTML to make things magically appear exactly where you want them when the user hovers over anything on your web page. This sort of code would be applied usually to Content Management Systems or social networking websites in which there is an owner of the content that you want to give editing options to for that specific content. Normal visitors would not get to see the magic buttons appear. <!DOCTYPE HTML> <html> <head> <style> div#box1{border:#999 2px solid; width:200px; height:200px;} div#box1 > img{position:absolute; z-index:2000; width:200px; max-height:200px;} div#box1 > a { display: none; position:absolute; margin:90px 0px 0px 120px; /* margin:top right btm left; */ z-index:3000; background: #F0F0F0; border:#666 1px solid; border-radius:3px; padding:5px; font-size:12px; text-decoration:none; color:#333; } div#box1:hover a { display: block; } </style> </head> <body> <div id="box1"> <a href="#">Change Profile Photo</a> <img src="avatar.png" alt="pic"> </div> </body> </html>
thumb

CSS Videos

Content Display Logic

Automatic Numbering Tutorial Element CounterHover Makes CMS Option Buttons Appear Tutorialnth child Tutorial Selector Alternate Colors