Marketplace

Change Image

A component with two images, one visible by default and the other one hidden, that will appear only on hover. Both images should be the same size (width and height).

This is available as a custom module or entirely drag and drop.

Custom module

The custom module is named Act21 Change Image.

Act2 Template Builder Change Image Custom Module

Module options

Image 1

This is the visible image.

Act2 Page Editor Change Image Image 1

Image 2

This is the hidden image.

Act2 Page Editor Change Image Image 2

Link

You can add a relative link /about-us, a full URL https://my.cdn.com/images/large-img.jpg or you can link to an anchor #tab2

Act2 Page Editor Change Image Link URL

Custom class

Use this box if you want to add a custom class to your module at the page level.

Act2 Page Editor Change Image Module Custom Class

Drag and drop

Add two Image modules and an optional Act21 Link module (if you want to have more control over the link, adding a class for a popup, etc) in a group with this class change-image

Act2 Template Builder Change Image

Add this class change-image-img-1 to your first Image module:

Act2 Template Builder Change Image Image 1 CSS Class

And this class change-image-img-2 to the second Image module:

Act2 Template Builder Change Image Image 2 CSS Class

Add this class change-image-link to your Act21 Link module:

Act2 Template Builder Change Image CSS Class

You can now add your Images:

Act2 Template Builder Change Image Image 1 Replace Image

And your optional link:

Act2 Template Builder Change Image Link Edit Options

By design Image 2 and the Link are not visible in the page editor, so we recommend adding recognizable names to these modules so you can easily find them in the modules sidebar.