[英]How to set div width equal to responsive img
我正在尝试获取img(流体)的宽度,并用overlay-text
覆盖它。 类overlay-text
具有100%的宽度,但是当屏幕分辨率更改时,它与图像的宽度仍然不相等。
是否可以将
overlay-text
宽度设置overlay-text
等于img宽度?
CSS
.overlay-text {
background-color: #79b13c;
color: white;
z-index: 50;
position: absolute;
bottom: 0px;
width: 100%;
text-align: center;
font-size: 1.4rem;
font-weight: 600;
-webkit-transition: background-color 0.5s ease-in-out, font-size 0.5s;
-moz-transition: background-color 0.5s ease-in-out, font-size 0.5s;
-o-transition: background-color 0.5s ease-in-out, font-size 0.5s;
transition: background-color 0.5s ease-in-out, font-size 0.5s;
}
.col-md-3:hover .overlay-text{
content:"";
background-color: #328ba6;
cursor: pointer;
transition: ease-in-out 0.5s, font-size 0.5s;
line-height: 2;
font-size: 1.5rem;
}
.col-md-3:hover .overlay-text::after{
transition: ease-in-out 1s, font-size 1s;
}
.col-md-3 {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
position: relative;
padding-left: 15px;
padding-right: 15px;
}
.col-md-3 img {
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.col-md-3:hover img{
-webkit-transform: translate3d(0,-10%,0);
transform: translate3d(0,-10%,0);
cursor: pointer;
}
.overlay-text-blank {
text-align: center;
font-size: 1.8rem;
font-weight: 600;
vertical-align: middle;
}
HTML
<div class="container">
<div class="row tiles">
<div class="col-md-3 col-sm-12">
<a href="blabla.php"><img alt="bla" src="https://ae01.alicdn.com/kf/HTB1ka9bSXXXXXX0XFXXq6xXFXXXy/diamond-painting-big-size-rhinestones-embroidery-coffe-decor-decorative-coffee-beans.jpg_640x640.jpg" class="img-fluid">
<div class="overlay-text">Cafe</div>
</a>
</div>
</div>
改变这个
.overlay-text {
position: relative;
bottom: 33px; // the height of .overlay element
}
和
.col-md-3:hover .overlay-text{
bottom: 48px; // the height of .overlay element when it grows
}
这是一个小提琴: https : //jsfiddle.net/mnmwdg4g/12/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.