Archived topic
Image hover
12 replies · Started by Jusung on January 17, 2023
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?
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/
When the mouse is on the image, I wanna show other image.
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.
Yes That thing.
but the effect should be slide or something more smooth.
Do I need to add code for that?
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.
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.
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/
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.
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
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?
It seems working well.
I just gave padding:0; and adjust the height to 10vh and it works..
I see. Glad it's working now!