I'm trying to get width of img (fluid) and overlay it with overlay-text
. Class overlay-text
has 100% width, but it still doesn't have equal width tothe image when the screen resolution changes.
Is possible to set
overlay-text
width equal to img width?
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>
change this
.overlay-text {
position: relative;
bottom: 33px; // the height of .overlay element
}
and
.col-md-3:hover .overlay-text{
bottom: 48px; // the height of .overlay element when it grows
}
here's a fiddle : https://jsfiddle.net/mnmwdg4g/12/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.