I'm having trouble with my CSS code for an image hover effect in a div. The image is appearing larger than the div and leaking out of it. How can I make sure the image stays contained within the div?
Here's the updated CSS code:
img {
display: none;
max-height: 50vh;
}
.effect:hover .text {
display: none;
}
.effect:hover img {
display: block;
}
And here's the corrected HTML code:
<div class="row">
<div class="col-lg-3 alternate_2 effect">
<h1 class="display-6 text">Studio Griot</h1>
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium dui ultrices, ornare mauris in, ultricies sapien. Proin dictum urna quis mauris pharetra, sit amet aliquam diam suscipit. In congue.</p>
<a href="#">
<img src="images/Shalaj.JPG"/>
</a>
</div>
<!-- additional columns go here -->
</div>
Thank you for your assistance!