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.

Example of hover color on Tiles


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

Here is the custom CSS code you will need in order to set a hover color in the Tiles Design Element:

.shortpoint-tile:hover .shortpoint-tile-bg-color {
     background-color: cyan !important;
     transition: 500ms;

Please copy the above code to the clipboard.

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

Note: You may update the background-color and transition values according to your preferences.

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

Update CSS values and preview

Note: The hover color will not be displayed on Tiles with dynamically connected content, or Tiles with a background image.

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