How can we help you today?

How to Add a Hover Color to the ShortPoint Tiles Design Element with Custom CSS

By default, the ShortPoint Tiles Design Element doesn't have the option to set a hover color for the tiles. However, you can add a hover color using some custom CSS.

default colored tilesresult hover color


Before we begin

To use ShortPoint CSS customizations, you must have ShortPoint SPFx version or later.

We recommend you always have the latest version installed. Visit our Download ShortPoint page to get the latest version of ShortPoint, or you can use the ShortPoint SPFx Auto Upgrade Feature to ensure you always have the latest version.

This article is for you if:

  • You have ShortPoint installed on your SharePoint site(s).
  • You are a ShortPoint user with an active license.

Step 1. Open the settings of the Tiles Design Element

In edit mode, click the cog wheel icon of the Tiles Design Element to open the settings:

Open settings of Tiles Design Element

Switch to the Custom CSS tab:

Switch to the Custom CSS tab

Step 2. Copy the custom CSS code

We have two sets of CSS codes for the Tiles Design Element that you can choose from.

Single Hover Color

If you want to set one hover color for all tiles, copy the following CSS code to your clipboard: 

.shortpoint-tile:hover .shortpoint-tile-bg-color {
background-color: cyan !important;
transition: 500ms;
Note: You can update the background-color and transition values according to your preferences. 

Multiple Hover Colors

If you want to set a different hover color for each of the tiles, copy the following CSS code instead:

.shortpoint-tile:nth-child(1):hover .shortpoint-tile-bg-color {
background-color: cyan !important;
transition: 500ms;

.shortpoint-tile:nth-child(2):hover .shortpoint-tile-bg-color {
background-color: red !important;
transition: 500ms;

.shortpoint-tile:nth-child(3):hover .shortpoint-tile-bg-color {
background-color: yellow!important;
transition: 500ms;

Additional information:

For tiles that contain images, remember to add this CSS code to the ones above:

opacity: 1 !important;

Here is an example:

.shortpoint-tile:nth-child(1):hover .shortpoint-tile-bg-color {
opacity: 1 !important;
background-color: cyan !important;
transition: 500ms;
For advanced users, you can set the number of tiles as :nth-child (3) or you can make it more dynamic by using :nth-child (2n) or :nth-child (2n+1)

Step 3. Update the Tiles Design Element with the copied code

Paste the copied code from Step 2 into the Custom CSS field:

Paste the copied code

You can check how it will look on your page by clicking the Preview button:

Preview tile hover color

Note: The hover color will not be displayed on Tiles with dynamically connected content.

Click Update:

Click Update

Click Save and then Republish to save the changes.


That's it. You should now have a custom hover color on your Tiles Design Element. It could look something like this:

Example of final result

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 51 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