How to Make Tiles Black and White, and Colorful on Hover

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);
}