In this tutorial, we will learn how to achieve this beautiful black-and-white to colorful transition hover effect for your Tiles element.



Step 1: Select Tiles Style


This tutorial works best with the following styles: Flat, Sarah, Bordered


To select the style, open the settings of Tiles and select the style from a dropdown as shown below:



Here are some suggestions:


  • Sarah style:   
  • Bordered style:




  • Flat style:


     

Step 2: Copy the CSS code

Copy the code below:

.shortpoint-tile-bg {
  filter: grayscale(1);
  transition:filter 500ms 
}
.shortpoint-tile:hover .shortpoint-tile-bg{
  filter: grayscale(0);
}

Step 3: Insert code into the Tiles element


Open the page in edit mode, press the cog wheel on the Tiles element and switch to Custom CSS tab.

Paste the code in the field. Then, press Update.

Save the page.


That's it!


Related articles: