Hover Image Effect

Hi,

I’m trying to create a hover image effect, so when you hover over an image, another image would appear. I’m using this as a “before” and “after” gallery for retouching.

So far I’ve placed the following code into the custom CSS to test 3 images:

#ftg-11 .tile:nth-child(2) .tile-inner .caption-block { background-image: url(‘https://192.241.138.61/wp-content/uploads/2017/05/LCBO_CubaLibre_Before.jpg’); background-size: cover; }
#ftg-11 .tile:nth-child(3) .tile-inner .caption-block { background-image: url(‘https://192.241.138.61/wp-content/uploads/2017/05/LCBO_Tacos_Before2.jpg’); background-size: cover; }
#ftg-11 .tile:nth-child(4) .tile-inner .caption-block { background-image: url(‘https://192.241.138.61/wp-content/uploads/2017/03/LCBO1_Before1.jpg’); background-size: cover; }

The result is this:
https://192.241.138.61/recent-work/

I’m wondering if you can help with the following:

1. When you hover over the images, it shrinks the “before”, fitting to the height instead of width, and also seems to put a weird white border around, cutting off the image. Any ideas on how to fix this?

2. It automatically puts on the caption on the hover. If i don’t have a title or caption in the image, the image hover effect doesn’t work. How would I remove the caption and keep the hover effect? See image #2 as an example.

3. The lightbox shows the same image twice when opened, is this fixable?

Thanks in advance.

-Genia Shapira

The page I need help with: [log in to see the link]