.flip-image-wrapper {
    display: block;
    position: relative;
    overflow: hidden;
}

.flip-image-wrapper .hover-image {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.flip-image-wrapper.has-hover-image:hover .main-image {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.flip-image-wrapper.has-hover-image:hover .hover-image {
    display: block;
    opacity: 1;
}