Profile: marcD-6

Problem:

The customer is experiencing an issue on their portfolio page where the hover image is not displaying correctly. Instead of appearing over the tile-image-logo on hover, it appears below it. The images were added using image blocks with dynamic sources and dynamic links, and custom CSS was applied to create a hover effect.

Solution:

We suggested using a different approach for implementing the hover effect in WordPress, given that the example provided by the customer used a different page builder. We provided a demo created with Toolset to illustrate a similar hover effect using two custom fields for the images. The solution involved using specific CSS classes (front-image and back-image) to control the visibility of the images on hover. The CSS was applied directly to the page using an HTML block to achieve the desired effect:

<style>
#wpv-view-layout-1204 .tb-grid-column {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}
 
#wpv-view-layout-1204 .tb-grid-column figure {
    position: relative;
    margin: 0;
    width: 100%;
    height: 100%;
}
 
#wpv-view-layout-1204 .tb-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
 
#wpv-view-layout-1204 figure.front-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}
 
#wpv-view-layout-1204 .tb-grid-column:hover figure.front-image {
    opacity: 1;
}
</style>

In the output of the View the back image is added first and the front image second (so the front image will cover the back image).

Please note that for this hover effect to work, the CSS targets the front image using a specific class ('front-image'), which you need to add in the View settings (please check the screenshot bellow).