Color overlay on image hover css - css

Question

I'm trying to overlay a white circle on top of an image once it is hovered over, however this is trickier than I thought using just CSS. The solution doesn't need to be a strictly CSS one, it's just that I wouldn't like to use images.
HTML/ERB
<div class="item-container">
<div class="rollover-item">
<%= link_to image_tag(#featured_product_first.product.images.order(:placement).first.image.url(:medium)), #featured_product_first.product %>
</div>
<%= link_to #featured_product_first.product.name, #featured_product_first.product %>
<% end %>
</div>
CSS
.item-container {
width: 100%;
height: 100%;
}
.rollover-item {
position: relative;
z-index: 1;
}
.rollover-info img:hover:after {
content: ' ';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(255,255,255,.5);
border-radius: 50%;
z-index: 10;
}

Answer 1

Assuming this structure
JSFiddle Demo
HTML
<div class="item-container">
<div class="rollover-item">
<img class="product-img" src="http://lorempixel.com/output/technics-q-c-200-200-7.jpg" alt=""/>
<a class="description" href="#">Product Description</a>
</div>
</div>
Then this general CSS should work. Using overflow hidden, absolute positioning and transitioning.
.item.container {
display:inline-block;
}
.rollover-item {
position:relative;
overflow:hidden;
width:200px;
}
.description{
position:absolute;
top:100%;
left:0;
display:block;
width:200px; /* as image */
height:200px; /* as image */
line-height:200px; /* as image */
text-align:center;
text-decoration:none;
color:black;
font-weight:bold;
background:rgba(255,255,255,0.5);
border-radius:50%;
transition:top 0.5s ease;
}
.rollover-item:hover .description {
top:0;
}

Answer 2

look at this example:
html:
<div class="item_cont">
<img src="img_src.jpg" />
<div class="circ"></div>
</div>
css:
.item_cont{width:100px;height:100px;}
.item_cont img{width:100px;height:100px;}
.item_cont .circ{display:none;background:#fff;width:80px;height:80px;border-radius:50%;-moz-border-radius:50%;-webkit-border-radius:50%;}
.item_cont:hover .circ{display:block;}
no js needed.
hope that helps.

Answer 3

use this code:
jsFiddle is here
HTML:
<div class="item-container">
<div class="rollover-item">
</div>
</div>
CSS:
.item-container{
position:relative;
width:200px;
height:200px;
background:tomato; /* I love this color */
}
.rollover-item{
position:aboslute;
width:0%;
height:0%;
margin:0 auto;
background:#fff;
border-radius:50%;
opacity:0;
transition:all 0.5s ease;
}
.item-container:hover .rollover-item{
width:100%;
height:100%;
opacity:1;
}