On mouse over should appear ADD button - html

Question

if someone could help me with this, would be great! I have some images on my webpage, and I want to make a small effect, when I'm moving the mouse over the image, should appear ADD button, in the center of the image, and around the button to be a background-color with opacity effect.
I have this HTML code:
<span class="img1" style="opacity: 1;"><img class="prodimg" src="img/naturale_pi_5_large.jpg" alt="Lily Pink Bag"></span>
<span class="img2" style="opacity: 0; visibility: visible;">
<div class="buttoncont">
Add to Cart
</div>
</span>
and also this CSS:
.buttoncont{
display:block;
width:92px;
margin:0;
background:#c33a56;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
#content .productlist .product .foot .buttoncont {
right:0;
position:absolute;
bottom:0;
}
.buttoncont a,
.buttoncont input {
display:block;
color:#ffffff;
width:100%;
height:30px;
line-height:30px;
text-align:center;
font-family: Arial, sans-serif;
font-size:90%;
background:url('img.jpg');
border:0;
padding:0;
cursor:pointer;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.buttoncont input:hover {
text-decoration:underline;
}
.miniproductlist .imagecontainer img {
vertical-align:middle;
display:inline;
max-width:100%;
outline:#ffffff 1px solid;
}
.miniproductlist .img2 {
position:absolute;
top:0;
left:0;
visibility:hidden;
width:100%;
height:81px;
}
Thanks in advance!

Answer 1

If you are wrapping everything in a container than you can simply accomplish this with CSS ONLY
.container button {
display: none;
}
.container:hover button {
display: inline-block;
}
Now what we are doing here is we are hiding the button, and on hovering the container div, we are showing it, alternatively you can use visibility: hidden; but that will take up space where display: none; wont