The image overlay module allows you to create simple image overlays for your pages or posts. Simply use two images of the same size to achieve the overlay affect. On desktop the image overlay appears on mouse hover, on mobile it appears on a mouse click.

You can also apply a URL to the image, so that clicking on the image will open the URL. On mobile this is triggered on the second click of the image, allowing the overlay to first appear and then the URL to open.

No URL

Image1

With URL – New window

Image1

With URL – Same Window

Image1

With URL – New window – Centered

Because of how the overlay image is position, the ability to align the image as you would a normal image module does not work (and has been removed from recent versions of the plugin). However by adding a custom CSS class to the module itself and a little CSS you can still achieve the positioning you require. See the example below as well as the CSS used to achieve it.


.centered-image-overlay {
 margin: 0 auto;
 text-align: center;
}
.centered-image-overlay .overlay {
 margin-left: 25%;
}

Image1

Exclusive to Elegant Marketplace

Buy Now
Sign up to download my PDF

Sign up to download my PDF

Join our mailing list to receive my COOL PDF

You have Successfully Subscribed!