我试图在将鼠标悬停在图像上时在其上方覆盖一个白色圆圈,但这比我认为仅使用 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;
}
最佳答案
假设这个结构
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;
}
关于css - 图像悬停 css 上的颜色叠加,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19474265/