HTML/CSS: Allow For Background Image Hover and Absolute Positioned Text - html

Question

I'm trying to accomplish the following:
Have a grayscaled image
Have text and a button positioned over the grayscaled image
Allow for a hover-effect on the grayscaled image so that it's colored on hover
The issue I'm running into is that when I'm hovering over the text/button of the absolute-positioned div on top of the image, the hover effect no longer works.
Here's an example:
Here's my HTML & CSS:
<div id="homepage-solutions">
<div class="image-box">
<img src="https://azbigmedia.com/wp-content/uploads/2019/11/metalworking.jpg">
<div class="text-box">
<h3>Metalworking</h3>
Learn More
</div>
</div>
</div>
#homepage-solutions .image-box {
display: inline-block;
position: relative;
overflow: hidden;
min-width: 250px;
min-height: 250px;
max-width: 100%;
max-height: 100%;
text-align: center;
list-style: none;
vertical-align: middle;
}
#homepage-solutions .image-box img {
display: block;
height: 200px;
width: 100%;
filter: gray;
-webkit-filter: grayscale(1);
filter: grayscale(1);
}
#homepage-solutions .image-box img:hover {
-webkit-filter: grayscale(0);
filter: none;
}
#homepage-solutions .text-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 2em;
text-align: center;
max-width: 500px;
}
#homepage-solutions h3 {
color: #fff;
font-size: 22px;
font-weight: 700;
margin-top: 0;
margin-bottom: 10px;
text-align: center;
}
#homepage-solutions .text-box p {
color: #fff;
font-size: 12px;
font-weight: 400;
margin: 10px 0;
}
#homepage-solutions .text-box a.btn {
display: inline-block;
width: auto;
color: #fff;
background: #fd5f11;
font-size: 13px;
font-weight: 700;
text-decoration: none;
text-transform: uppercase;
padding: 6px 20px;
margin: 5px 0 0;
border-radius: 0;
}
#homepage-solutions .text-box a.btn:hover {
opacity: 0.75;
}
Fiddle Links:
https://jsfiddle.net/mwilk/96p7nkw1/5/ https://jsfiddle.net/mwilk/96p7nkw1/6/#&togetherjs=H2kAkloCwG
Thanks!

Answer 1

Hi,
Just Edit Selector:
#homepage-solutions .image-box img:hover
To
#homepage-solutions .image-box:hover img
See It working
#homepage-solutions .image-box {
display: inline-block;
position: relative;
overflow: hidden;
min-width: 250px;
min-height: 250px;
max-width: 100%;
max-height: 100%;
text-align: center;
list-style: none;
vertical-align: middle;
}
#homepage-solutions .image-box img {
display: block;
height: 200px;
width: 100%;
filter: gray;
-webkit-filter: grayscale(1);
filter: grayscale(1);
}
#homepage-solutions .image-box:hover img {
-webkit-filter: grayscale(0);
filter: none;
}
#homepage-solutions .text-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 2em;
text-align: center;
max-width: 500px;
}
#homepage-solutions h3 {
color: #fff;
font-size: 22px;
font-weight: 700;
margin-top: 0;
margin-bottom: 10px;
text-align: center;
}
#homepage-solutions .text-box p {
color: #fff;
font-size: 12px;
font-weight: 400;
margin: 10px 0;
}
#homepage-solutions .text-box a.btn {
display: inline-block;
width: auto;
color: #fff;
background: #fd5f11;
font-size: 13px;
font-weight: 700;
text-decoration: none;
text-transform: uppercase;
padding: 6px 20px;
margin: 5px 0 0;
border-radius: 0;
}
#homepage-solutions .text-box a.btn:hover {
opacity: 0.75;
}
<div id="homepage-solutions">
<div class="image-box">
<img
src="https://azbigmedia.com/wp-content/uploads/2019/11/metalworking.jpg"
/>
<div class="text-box">
<h3>Metalworking</h3>
Learn More
</div>
</div>
</div>