How to reproduce such a visual effect?

This topic has 13 replies, 2 voices, and was last updated 3 years, 3 months ago by Fernando.

Viewing 14 posts - 1 through 14 (of 14 total)

Author

Posts

December 24, 2022 at 6:21 am #2472307

Nicolas

Hi,

How to reproduce the same visual effect as used on the feature image on this page when you hover it?

How to get that diagonal, black and white transparent wave effect?
(sorry, but I’m a native English speaker and I’m not sure how to describe it. The best way is to have a look at it live on the site)

What setting to use with the effects of GP?

Thank you and merry X-mas

December 25, 2022 at 6:08 pm #2473193

Fernando

Customer Support

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

December 26, 2022 at 1:13 am #2473408

Nicolas

Hello Fernando,

Thank you very much for your reply.
Links shared.

December 26, 2022 at 1:31 am #2473429

Fernando

Customer Support

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

December 26, 2022 at 1:53 am #2473448

Nicolas

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.

December 26, 2022 at 2:19 am #2473465

Fernando

Customer Support

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.

December 26, 2022 at 3:25 am #2473500

Nicolas

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?

December 26, 2022 at 5:42 pm #2474254

Fernando

Customer Support

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.

December 27, 2022 at 5:43 am #2474610

Nicolas

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

December 27, 2022 at 6:45 pm #2475225

Fernando

Customer Support

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;
}

December 28, 2022 at 3:30 am #2475539

Nicolas

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?

December 28, 2022 at 5:44 pm #2476300

Fernando

Customer Support

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.

December 29, 2022 at 3:28 am #2476672

Nicolas

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;
}

December 29, 2022 at 5:10 pm #2477431

Fernando

Customer Support

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

Author

Posts

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.

[Support request] How to reproduce such a visual effect?

Popular Articles

[Support request] How to reproduce such a visual effect?

Popular Articles

Start building better websites today.