How to have 2 hover effects work at the same time? - html

Question

So I'm a little stuck with the hover effects I'm trying to make 2 hover effects work at the same time. My goal is to have a frosted glass effect with text overlay. Here is my codepen https://codepen.io/kyannashanice/pen/mdRjmry
Stylesheet:
.product {
width: 400px;
height: 400px;
}
.container {
position: relative;
width: 400px;
height: 400px;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
z-index: 99;
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 30px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
/* Blur Hover Effect */
img {
position: absolute;
filter: none;
-moz-transition: all 0.4s ease-out;
-webkit-transition: all 0.4s ease-out;
-ms-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
border-radius:5px;
border:1px solid black;
}
img:hover {
opacity: 0.8;
filter: -webkit-filter: blur(4px);
filter: blur(4px);
-moz-transition: all 0.4s ease-out;
-webkit-transition: all 0.4s ease-out;
-ms-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
}
HTML:
<p>Both hover effects applied but one working over the other</p>
<div class="container">
<img src="https://www.mydomaine.com/thmb/aA3TdLIHHviKBrIBVLExBBnQjSA=/1790x1790/filters:no_upscale():max_bytes(150000):strip_icc():format(webp)/string-of-pearls-product2-2f5350b5894642ea8942a2726ee20f13.jpg" class="product">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
<br>
<br>
<br>
<p>No text overlay</p>
<img src="https://www.mydomaine.com/thmb/aA3TdLIHHviKBrIBVLExBBnQjSA=/1790x1790/filters:no_upscale():max_bytes(150000):strip_icc():format(webp)/string-of-pearls-product2-2f5350b5894642ea8942a2726ee20f13.jpg" class="product">
Both overlays work fine on their own but when they overlap only the text overlay will show. I would appreciate any help or direction if anyone knows how to make both effects go off at the same time.
Thank you!

Answer 1

The problem is that the hover is set to img. First you get the .overlay class that covers the photo and therefore the hover in the photo does not work.
Try add hover to container: ( instead img:hover)
.container:hover img{
opacity: 0.8;
filter: -webkit-filter: blur(4px);
filter: blur(4px);
-moz-transition: all 0.4s ease-out;
-webkit-transition: all 0.4s ease-out;
-ms-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
}
Markup HTML
Photo with text
<div class="container">
<img src="" class="product">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
Photo without text
<div class="container">
<img src="" class="product">
</div>