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.

Before	After

TABLE OF CONTENTS

• Before we begin
• Step 1. Open the settings of the Tiles Design Element
• Step 2. Copy the custom CSS code
  • Single Hover Color
  • Multiple Hover Colors
• Step 3. Update the Tiles Design Element with the copied code
• Result

Before we begin

To use ShortPoint CSS customizations, you must have ShortPoint SPFx version 5.2.2.28 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:

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. 

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

opacity: 1 !important;

.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:

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

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

Click Update:

Click Save and then Republish to save the changes.

Result

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

Related articles:

• How to Change Grey Text Background in ShortPoint Tiles
• How to Make Tiles Black and White, and Colorful on Hover