css - 图像悬停 css 上的颜色叠加

Question

我试图在将鼠标悬停在图像上时在其上方覆盖一个白色圆圈，但这比我认为仅使用 CSS 时要复杂得多。解决方案不需要是严格的 CSS 解决方案，只是我不想使用图像。

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

假设这个结构

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> 

那么这个通用 CSS 应该可以工作了。使用溢出隐藏、绝对定位和过渡。

    .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;
}