How to reproduce such a visual effect?

Hi Nicolas,

There's no feature in GP to achieve such an effect. This can be done through custom CSS code.

Can you provide the link to your Blog page, and we'll if it can be done for your site?

You may use the Private Information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

Hello Fernando,

Thank you very much for your reply.
Links shared.

You can try adding this through Appearance > Customize > Additional CSS:

.dynamic-content-template {
    overflow: hidden;
}

.dynamic-content-template a.gb-container-link:after {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    bottom: -50%;
    left: -50%;
    background: linear-gradient(to bottom, rgba(229, 172, 142, 0), rgba(255,255,255,0.9) 50%, rgba(229, 172, 142, 0));
    transform: rotateZ(60deg) translate(-5em, -40em);
}

.dynamic-content-template .gb-container-link:hover::after {
    animation: sheen .5s ease-in;
}

@keyframes sheen {
    100% {
        transform: rotateZ(60deg) translate(-1em, 30em);
    }
}

.dynamic-content-template > .gb-container {
    transition: filter .5s ease-in;
}

.dynamic-content-template > .gb-container:hover {
    filter: brightness(80%);
}

Here it is tested on your site: https://share.getcloudapp.com/P8uN9YP9

Fernando, I have a preference for the original effect. I love the way their image is cleanly "sliced" by their diagonal effect. No blurry effect, just a clean transparent shadow effect, together with the image resizing down a bit.

Bbut this is close and I have to say you are a magician.

If you want it clean, you can try something like this:

.dynamic-content-template {
    overflow: hidden;
}

.dynamic-content-template a.gb-container-link:after {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    bottom: -50%;
    left: -50%;
    background: #ffffffee;
    
    transform: rotateZ(60deg) translate(-5em, -45em);
}

.dynamic-content-template .gb-container-link:hover::after {
    animation: sheen .5s ease-in;
}

@keyframes sheen {
    100% {
        transform: rotateZ(60deg) translate(-1em, 30em);
    }
}

.dynamic-content-template > .gb-container {
    
    transition: filter .5s ease-in;
    transition: scale .5s ease-in;
}

.dynamic-content-template > .gb-container:hover {
    filter: brightness(80%);
    scale: .95;
    transition-delay: 150ms;
    transition-property: scale, filter;
}

The reference site uses some JS code in its hover effect which makes it hard to dissect and copy. With that said, copying the same exact would be out of our scope of support. Hope you understand.

Fernando, i COMPLETELY understand and THANIK YOU so much for your help.

Can you just tell me what rows from your latest code snippet above I should extract and insert in your first proposal if I want to keep the first effect but adds the resizing effect to it?

If you want to combine the two codes here it is:

.dynamic-content-template {
    overflow: hidden;
}

.dynamic-content-template a.gb-container-link:after {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    bottom: -50%;
    left: -50%;
    background: linear-gradient(to bottom, rgba(229, 172, 142, 0), rgba(255,255,255,0.9) 50%, rgba(229, 172, 142, 0));
    transform: rotateZ(60deg) translate(-5em, -45em);
}

.dynamic-content-template .gb-container-link:hover::after {
    animation: sheen .5s ease-in;
}

@keyframes sheen {
    100% {
        transform: rotateZ(60deg) translate(-1em, 30em);
    }
}

.dynamic-content-template > .gb-container {
    
    transition: filter .5s ease-in;
    transition: scale .5s ease-in;
}

.dynamic-content-template > .gb-container:hover {
    filter: brightness(80%);
    scale: .95;
    transition-delay: 150ms;
    transition-property: scale, filter;
}

I basically added the background value of the first code to the second one.

The code for the scaling is this one:

.dynamic-content-template > .gb-container {
    
    transition: filter .5s ease-in;
    transition: scale .5s ease-in;
}

.dynamic-content-template > .gb-container:hover {
    filter: brightness(80%);
    scale: .95;
    transition-delay: 150ms;
    transition-property: scale, filter;
}

But I added a delay for it so that it doesn't produce a somewhat buggy effect as the shiny effect runs.

Thanks, you're a magician.

Can you see the dark transparent background behind the white title of the posts?
What I actually want was for the hover effect to apply that dark transparent layer on the overall image while having the title remains white. As such, the titles is highlighted well.

You can see that on the URL share in the PI field.
Thank you

Can you try using this code instead?:

.dynamic-content-template {
    overflow: hidden;
}

.dynamic-content-template a.gb-container-link:after {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    bottom: -50%;
    left: -50%;
    background: linear-gradient(to bottom, rgba(229, 172, 142, 0), rgba(255,255,255,0.9) 50%, rgba(229, 172, 142, 0));
    transform: rotateZ(60deg) translate(-5em, -45em);
}

.dynamic-content-template .gb-container-link:hover::after {
    animation: sheen .5s ease-in;
}

@keyframes sheen {
    100% {
        transform: rotateZ(60deg) translate(-1em, 30em);
    }
}

.dynamic-content-template > .gb-container {
    
    transition: filter .5s ease-in;
    transition: scale .5s ease-in;
}

.dynamic-content-template > .gb-container:hover {
    
    scale: .95;
    transition-delay: 150ms;
    transition-property: scale, filter;
}

.dynamic-content-template > .gb-container:hover:after {
    content:"";
    z-index:97;
    height: 100%;
    width: 100%;
    position: absolute;
    left:0;
    top:0;
    background-color: #00000077;
}

.dynamic-content-template > .gb-container:hover > .gb-inside-container > .gb-container {
    position:relative;
    z-index: 99;
    scale: 1.05;
    transition-delay: 150ms;
    transition-property: scale;
}

.dynamic-content-template > .gb-container > .gb-inside-container > .gb-container {
    transition: scale .5s ease-in;
}

I tested it but I was not happy with it.
The end result is good when looking at the transparency of the layer and the whiteness of the title, but there is an issue: It seems like the overall effect (image size decrease and animation) is only starting after once the image has been darkened, as if there was some kind of delay.

In other words, the effect seems to appear in 2 steps rather than in a smooth, continuous way like with the previous version (which I kept active on my site).

Not sure if we can get the better of those 2 options in merging them?

Yes, there's a delay on purpose. As mentioned, it's there so that the transition doesn't look buggy.

In the code, it's these line: transition-delay

There are two of them. You can set them to something lower in value.

The .5s values in the transition define how long an animation runs.

You decrease these values two make the animation faster.

Thank you Fernando.
Where in the code should I adjust the values to change the opacity of the transparent layer?

I'm talking about this version:

.dynamic-content-template > .gb-container > .gb-inside-container {
    padding-bottom: 0;
}

.dynamic-content-template {
    overflow: hidden;
}

.dynamic-content-template a.gb-container-link:after {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    bottom: -50%;
    left: -50%;
    background: linear-gradient(to bottom, rgba(229, 172, 142, 0), rgba(255,255,255,0.9) 50%, rgba(229, 172, 142, 0));
    transform: rotateZ(60deg) translate(-5em, -45em);
}

.dynamic-content-template .gb-container-link:hover::after {
    animation: sheen .5s ease-in;
}

@keyframes sheen {
    100% {
        transform: rotateZ(60deg) translate(-1em, 30em);
    }
}

.dynamic-content-template > .gb-container {
    
    transition: filter .5s ease-in;
    transition: scale .5s ease-in;
}

.dynamic-content-template > .gb-container:hover {
    filter: brightness(80%);
    scale: .95;
    transition-delay: 150ms;
    transition-property: scale, filter;
}

It's this line: filter: brightness(80%);. You can change 80% to your preferred value.