Image overlay hover in 7.1 Masonry Grid

Hey,

Is it possible to have an image overlay so that it changes the image on hover? From what I can tell it is not possible with Masonry Grid. I have 30+ images on the page that I want to have a rollover on.

Many thank in advance!

https://www.nickbarr.co/

I found this code below. A note below this code...

#img-hover {

background-image: url('first-image-url');

height: 20vw;

width: 20vw;

background-size:contain; }

#img-hover:hover {

background-image: url('second-image-url');

}

But I am unable to add the code injection into the gallery section for the above code to work

<div id="img-hover"></div>

You mean

Hover image >> Overlay appear

OR

Hover image >> Change to another image

?

Hey,

I am a little naive when it comes to this stuff so to me this is the same thing, obviously it is not.

4 hours ago, tuanphan said:

Hover image >> Overlay appear

OR

Hover image >> Change to another image

I would like to hover over the image and a new image appears, once you take the hover off the original images returns. 
 

The images is also a clickable link if that changes anything.

Thank you!!!!!

I think I sent code in another thread, you try checking it again (I just updated code to fix flash problem)