Two methods to create interesting hover effects with icons

In today's quick tip article we take a look at two ways you can add an icon with hover effect on your pictures.

 

Method One:

  1. Create a column with your desired background. In this case, we chose an image of an outdoor photographer
  2. Add a text module in the column and place your desired icon in the text module
  3. Double click on the text, so the edit bar appears at the top of the Editor. 
  4. In the top left dropdown you can define your own custom text, which you can use for the module
  5. You will likely need to make the font size quite big for the icon to look good. 
  6. Define a colour and a hover colour for the custom text
  7. Then add the link to the icon the same way you would add links to text in the text module

 

Method Two:

  1. Create an empty column, then add an image module to the column
  2. Choose a background image. If you want to have a solid colour, you can add a picture of a solid colour
  3. Enable 'hover effects' and choose 'icon.' Pick your preferred icon.
  4. Enable the link in the image module, and choose where the link should go to. 

Was this article helpful?
1 out of 1 found this helpful