//3 column images
.image-section {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.image-card {
width: 33.33%; /* 3 equal columns */
padding: 20%; /* 20% padding on all sides */
border-radius: 5px;
transition: all 0.3s ease-in-out; /* Smooth hover effect transition */
position: relative; /* For overlay effect */
}
.image-card a {
display: block; /* Ensure link covers the whole card */
height: 100%; /* Link expands to full card height */
width: 100%; /* Link expands to full card width */
text-decoration: none; /* Remove default link underline */
}
.main-image,
.hover-image {
position: absolute; /* Overlap and hide initially */
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.hover-image {
opacity: 0; /* Overlay initially invisible */
}
.image-card:hover .hover-image {
opacity: 0.5; /* Overlay appears on hover with 50% opacity */
}
.image-card:hover .main-image {
opacity: 0.8; /* Reduce main image opacity slightly on hover */
}
