Image Focus Blocks

The Image Focus Block allows you to add 2 overlapping images that you can set to change to greyscale or coloured upon mouse hover.

Below is a great example using multiple photo blocks where the logo image is located over an image in grayscale.

Step 1 - On the page you're working on, click "Add Section" from the sidebar, then select and add "Image Focus Blocks".

Step 2 - Set Section Settings

You can set the block to change from grayscale to colored when the mouse hovers over the images.

Step 3 - Add a Photo Block (you can add more than 1)

Step 4 - Customize the Photo Block - Add the Main Image and the Image Overtop

The image overtop is optional. Below is a great example of using the block with a text that redirects to another page.

Step 5 - Customize the Photo Block - size, alignment, transparency

Step 6 - Don't forget to save your work!