[英]background rollover on responsive image using CSS
我正在尝试使用CSS3和bootstrap3在响应图像上产生覆盖效果。 问题在于,翻转会产生覆盖背景,该背景适用于页边距,因此比图像本身大。
这是我的html:
<div class="col-sm-6 col-md-4 col-lg-3">
<figure>
<a href="#">
<img class="img-responsive" src="img/portfolio/prw-4.jpg">
</a>
</figure>
</div>
和CSS:
#portfolio figure a:after {
content:'Text';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: all 1s;
-webkit-transition: all 1s;
background: rgba(0,0,0,0.7);
color: #FFF;
text-align: center;
padding: 60px 0;
}
#portfolio figure a:hover:after {
opacity:1;
}
有人有建议吗? 谢谢
您可以考虑使用box sizing,因为您已经在使用“实验性” css3。这里有一篇不错的文章: Box Sizing | CSS-Tricks
所以基本上说:
* {
-moz-box-sizing: border-box; /* Firefox 1, probably can drop this */
-webkit-box-sizing: border-box; /* Safari 3-4, also probably droppable */
box-sizing: border-box; /* Everything else */
}
在您的CSS中,这也许可以为您解决。 祝好运。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.