My issue lies with the hover effect on my webpage. Currently, the problem I am facing is that the hover effect activates whenever my mouse hovers over any part of the column in a row. How can I make it so that the effect only triggers when hovering over the image itself?
Below is the JSX code snippet from my project:
<div className="container App">
<Header />
<div className="caption-style-1 row">
<div className="hover-img col-md-6 col-sm-6 nopadding">
<div id="photography">
<img
src={require("../img/chaps_1x.jpg")}
className="image"
/>
<div className="overlay">
<div className="text">Photography</div>
</div>
</div>
</div>
</div>
<h4>CONTACT</h4>
</div>
And the corresponding CSS code block features the styling for the hover effect, where the issue persists as the entire column is affected by the hover rather than just the image:
.image {
width: 50%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin-left:auto;
margin-right:auto;
height: auto;
width: 50%;
opacity: 0;
transition: .5s ease;
background-color: rgba(0,0,0,0.65);
}
.hover-img:hover .overlay {
opacity: 1;
}
.text{
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.nopadding{
padding:0 !important;
}