I want to hover both classes col-md-3 and overlay-text via one hover. When hover over image I want to trigger second hover, in this case over text.
If CSS somehow could support if/else statements, I would wrote if col-md-3 is hovered then hover overlay-text.
.overlay-text {
background-color: #79b13c;
color: white;
z-index: 50;
position: absolute;
bottom: 0px;
width: 270px;
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;
}
.overlay-text:hover {
content: "";
background-color: #328ba6;
cursor: pointer;
transition: ease-in-out 0.5s, font-size 0.5s;
line-height: 2;
font-size: 1.5rem;
}
.overlay-text:hover::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: 5px;
padding-right: 5px;
}
.col-md-3 img {
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.col-md-3 img:hover {
-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;
}
<div class="container">
<div class="row tiles">
<div class="col-md-3">
<img alt="text" src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" class="img-fluid">
<div class="overlay-text">Custom text</div>
</div>
</div>
</div>
FiddleJS Demo: https://jsfiddle.net/57nvbfud/5/
You have two options here:
First one change hover
to img:hover + .overlay-text
Second one is change both hover
in col-md-3:hover
.
.overlay-text {
background-color: #79b13c;
color: white;
z-index: 50;
position: absolute;
bottom: 0px;
width: 270px;
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: 5px;
padding-right: 5px;
}
.col-md-3 img {
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.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;
}
<div class="container">
<div class="row tiles">
<div class="col-md-3">
<img alt="text" src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" class="img-fluid">
<div class="overlay-text">Custom text</div>
</div>
</div>
</div>
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments