[Demo] Show Buttons over Image on Hover

[Demo] Show Buttons over Image on Hover

by CJ Juarez

HTML

<h2>Hover on the Image to see the Buttons</h2>
<div class="show-image">
    <img src="https://goo.gl/UcNTEX" />
    <input class="update" type="button" value="Update" onclick="alert('Update!')"/>
    <input class="delete" type="button" value="Delete" onclick="alert('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%;
}