I am a beginner in web development and encountering a specific issue. To address this, I have created a Codepen
My challenge involves implementing images for the 6 cards displayed. Upon hovering over an image, it should transition to show the content of the card. However, the first three cards still display the image instead of the content.
My proposed solution is to replace the image with a white background containing the content when hovering over it, similar to the underlying three cards.
If anyone can provide guidance on how to achieve this, I would greatly appreciate it.
.services .icon-box {
text-align: center;
border: 1px solid #e2eefd;
padding: 80px 20px;
transition: all ease-in-out 0.3s;
}
<!-- More CSS code here -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Roboto:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
<section id="services" class="services">
<div class="container" data-aos="fade-up">
<!-- More HTML code here -->
</section>Thank you for your assistance!