我试图在图像顶部覆盖一个白色圆圈,但是这比我想象的那样简单。解决方案不需要严格的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;
}
答案 0 :(得分:2)
假设这个结构
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;
}
答案 1 :(得分:0)
看看这个例子:
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。
希望有所帮助。答案 2 :(得分:0)
使用此代码:
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;
}