[Resolved] Image hover

[Jusung]

On The page, the images above test 1,2,3,4,
I wanna add hover effect on the image.
I have the image files for hover.

Is there a way to make this?

[Fernando]

Hi Jusung,

What sort of hover effect are you looking for?

For reference, effects are possible through GB Pro for images. Reference: https://docs.generateblocks.com/article/effects-overview/

[Jusung]

When the mouse is on the image, I wanna show other image.

[Fernando]

For reference, do you have a reference site with such an effect? Or, are you referring to something like this?: https://codepen.io/navnoor_brar/pen/QBxyzm – Hover over the image on the link to see the effect.

[Jusung]

Yes That thing.

but the effect should be slide or something more smooth.

Do I need to add code for that?

[Fernando]

No, don’t add that code. It’s just an example.

What sort of slide is this? Are you referring to a slider where image 1 goes to 2, 3, 4 so on and so forth?

Something like this?: https://codepen.io/dudleystorey/pen/DvZjLz – click on arrows to see the effect.

[Jusung]

That is amazing.

but I am asking the pictures aboce test1,2,3,4.

on the link, you can see which image I want to add as a hover effect.

[Fernando]

I see. A feature similar to that is still in planning for GenerateBlocks Pro.

For now, you’ll need a third-party plugin or a custom code for that.

Here are some plugins you may want to try: https://www.wpbeginner.com/best-wordpress-slider/

[Jusung]

Can I know the custom code for this.

I guess it is php code as I did to change the logo for different color?

It is the pictures above test1.

[Fernando]

Unfortunately, this level of customization would be out of our scope of support.

The PHP code needed to change a logo is fairly simple in comparison to a slider code which also needs JS code.

I would recommend looking for a developer for this. It would also be good to ask for recommendations here: https://www.facebook.com/groups/1113359788719597

[Jusung]

Can you check it now?

I have made the hover effect on the four images above test 1,2,3,4

However, the image size is different and have no idea how to adjust the image size.
Is there a way to make the image size the same?

[Jusung]

It seems working well.

I just gave padding:0; and adjust the height to 10vh and it works..

[Fernando]

I see. Glad it’s working now!

[Author]

Posts