title: Color overlay on image hover css
body: <p>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.</p>
  
  <p>HTML/ERB</p>
  
  <pre><code>&lt;div class="item-container"&gt;
    &lt;div class="rollover-item"&gt;
      &lt;%= link_to image_tag(@featured_product_first.product.images.order(:placement).first.image.url(:medium)), @featured_product_first.product %&gt;
    &lt;/div&gt;                
    &lt;%= link_to @featured_product_first.product.name, @featured_product_first.product %&gt;
    &lt;% end %&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.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;
  }
  </code></pre>