Topic: How do I create a hover image using two images

arjona
August 30, 2023 at 9:42 am

Hello,
I would like to create a hover effect using two images. one image is static then it changes to the second image (hover) when you hover over it and if you click on the image it takes you to a specific link.

How do I do this in generate blocks pro?

See both images in link: https://postimg.cc/gallery/tPnpGNW

Thank you,
Lee
Fernando
August 30, 2023 at 4:18 pm

Hi Lee,

That’s not possible with GenerateBlocks Pro.

You’ll need a custom solution.

Can you add the two images through an Image Block and put them inside one Container Block? Then, share the link to where you’ve added these. I’ll check what code is needed.
arjona
August 30, 2023 at 6:25 pm

thank you
Fernando
August 30, 2023 at 6:53 pm

You’re welcome! If you’ll need help with the custom solution, we’ll be here to help.
arjona
August 30, 2023 at 6:56 pm

I will need help. Thank you. Is it specific code that I need to add?
Fernando
August 30, 2023 at 7:08 pm
Yes, a CSS code will be needed. I’ll check your structure and see the appropriate CSS.

Here’s a basic CSS for the structure I mentioned:
```
.gb-container.cu-change-image-effect > :first-child, .gb-container.cu-change-image-effect:hover > :last-child{
    display:none;
}

.gb-container.cu-change-image-effect:hover > :first-child{
    display:block;
}
```
You can add this through Appearance > Customize > Additional CSS.

Make sure to add cu-change-image-effect to the class list of the Container Block. Adding Custom Classes: https://wordpress.com/support/wordpress-editor/adding-additional-css-classes-to-blocks/

It’s ideal to place images of the same dimension for it to work properly.

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

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

How do I create a hover image using two images