图像悬停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;
}

Answer 2

看看这个例子：

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

不需要js。

希望有帮助。

Answer 3

使用此代码：

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