How to create an image change on click

[bluebit]

I’ve been installing various plugins, all don’t do what I need, so I need some help.

I’d like to display an image and when the user mouseclicks on the image it changes to another image the exact height and width, but this new image when clicked-on, opens a link in a new tab in the browser. So basically there are two clicks involved. One to change the image, and the other to click again on the image to open the link.

[Leo]

Hi there,

I’m not aware of a plugin that can do this either so it will likely require a custom solution unfortunately.

Have you seen this done somewhere that you can link me to? I can try to see if they used a plugin or not.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[bluebit]

https://www.jqueryscript.net/demo/jQuery-Plugin-For-CSS3-Powered-Flip-Animations-justFlipIt/

https://www.jqueryscript.net/demo/Create-3D-Card-Flip-Effects-On-Hover-Using-jQuery-CSS3/

https://www.jqueryscript.net/demo/jQuery-Plugin-To-Flip-Images-Using-CSS3-Animations-Flipper/#

https://www.jqueryscript.net/demo/Flip-An-Html-Element-with-jQuery-CSS3-Flipper/

https://www.jquery-az.com/jquery/demo.php?ex=71.0_1

Here are some examples, but I can’t figure out how to install this jquery stuff in generate press. Basically flip an image on click and it shows a clickable image that when clicked opens the link.

[bluebit]

this one is cool: https://codepen.io/mwmwmw/pen/OVrvrj

just how to make the entire image clickable to open a new tab after its been flipped.

found more:

https://codepen.io/nicolamihaita/pen/zKXAOW

https://codepen.io/DmitryKorobov/pen/LrWxKO

https://codepen.io/willalanjohnson/pen/epRbvb

[Leo]

jQeury needs to be loaded like this:
https://generatepress.com/forums/topic/loading-circle-going-round/#post-939319

Unfortunately some of those Codepen solutions won’t work out of box in a WordPress environment.

just how to make the entire image clickable to open a new tab after its been flipped.

This will certainly require custom solution which is out of the scope of this forum unfortunately.

I would still recommend finding a plugin solution that meets your need as much as possible to keep things simple:
https://wordpress.org/plugins/image-hover-effects-ultimate-visual-composer/
https://wordpress.org/plugins/flip-boxes/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts