[Solved] Modal overlay overlapping image with 100% width

[NeocBlack]

Hello,

I’ve styled some images with the modals-popup feature. I also used an overlay (.image:hover:after, .image:hover:before) when the mouse hovers the image and when image is clicked it should popup with a transparent black background, which is working currently.

The issue is that the overlay shows in 100% width and is not wrapped around the image. so when you hover over the image the full length of the page is black with the overlay.

You can see the example here:
http://www.blackbikemedia.com (scroll down to section: “Recent Work” and check those images.)

Can anyone please explain why suddenly the width of the overlay is not wrapped around the image?

Thanks in advance!

[Paulie_D]

Simplest guess is that you haven’t added position:relative to the .image div wrapper.

EDIT – Nope, you haven’t…that was it.

[NeocBlack]

HA, that was it sir, Cheers….although it was already in the css, it was positioned on top in the css. The only thing I did was place it under the .image::before, .image::after reference.

Thanks a lot!

[Author]

Posts