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>