.image-container {
    width: 550px; /* Set the desired width */
    height: 550px; /* Set the desired height */
    position: relative; /* Needed for positioning the images */
}

.default-image,
.hover-image {
    position: absolute; /* Position the images absolutely within the container */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* object-fit: cover; Optional: Scale the image to fit the container */
}

.hover-image {
    opacity: 0; /* Hide the hover image by default */
    transition: opacity 0.3s ease-in-out; /* Add a smooth transition */
}

.image-container:hover .hover-image {
    opacity: 1; /* Show the hover image on hover */
}