[Demo] Show Buttons over Image on Hover

[Demo] Show Buttons over Image on Hover

by Tadit Dash

HTML

<h2>Hover on the Image to see the Buttons</h2>
<div class="show-image">
    <img src="http://taditdash.files.wordpress.com/2014/01/tadit-dash.jpg" />
    <input class="update" type="button" value="Update" />
    <input class="delete" type="button" value="Delete" />
</div>

CSS

div.show-image {
    position: relative;
    float:left;
    margin:5px;
}
div.show-image:hover img{
    opacity:0.5;
}
div.show-image:hover input {
    display: block;
}
div.show-image input {
    position:absolute;
    display:none;
}
div.show-image input.update {
    top:0;
    left:0;
}
div.show-image input.delete {
    top:0;
    left:79%;
}