How can we help you today?

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

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:

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

World's best intranet sites are designed using ShortPoint

Get started today! Learn more
See all 52 topics

Start a trial

Ignite your vision. Install ShortPoint directly on your site, or play in sandbox mode. No credit card required.

Get started today

World’s best intranet sites are designed using ShortPoint

Thousands of companies using ShortPoint everyday to design, brand and build award winning intranet sites.

Get started Learn more