Wordpress, Divi, Image replace on hover

Question

Looking for a code I can plug in Using images to make a giant interactive button

I'm working with the divi code module in word press. I want to be able to have an image swap with another image on mouse over. Also change back when mouse off all with a reasonably fast fade. (I will plug in the image Urls ).

I also want the image to link to a url (I will add this, again just say where in the code ie |your url here|).

For mobile or devices with touch screen I would like the First image to change to the second on taping the image, then redirecting to the same url

Any help would be much appreciated :)

Answer 1

Watch my codepen: http://codepen.io/tobiasglaus/pen/wzYZAP

background: url('http://www.hutui6.com/data/out/102/66775709-image-wallpapers.jpg');

I set a background image in the css, which changes on hover...

On mobile devices hover effects are automatically appearing when tapping, so thats the same.

Answer 2

Did a bit more digging, here is how to do it. With HTML

    <a class="ds-hover-1" href="(LINK URL)"><img src="(NORMAL IMAGE URL)"onmouseover="this.src='(OVERLAY IMAGE URL)'" onmouseout="this.src='(NORMAL IMAGE URL)'"></a>

PS My First line of Html ever written haha what a scrub Now Investigating how to do a fade