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, with custom CSS, you can customize the hover color of tiles. Follow along to learn how.

TABLE OF CONTENTS

• Prerequisites
• Step-by-step Tutorial
  • Option 1: Add a Single Hover Color
    • Step 1: Edit the ShortPoint Web Part
    • Step 2: Copy the Code
    • Step 3: Edit the Tiles Design Element
    • Step 4: Paste the code
    • Step 5: Save
  • Option 2: Add Multiple Hover Colors
    • Step 1: Edit the ShortPoint Web Part
    • Step 2: Copy the Code
    • Step 3: Edit the Tiles Design Element
    • Step 4: Paste the code
    • Step 5: Save

Prerequisites

• You must have the latest version of ShortPoint SPFx installed on your SharePoint environment.
• You must be a ShortPoint Designer with an active license.
• You must already have the Tiles Design Element on your page.
• Your Tiles Design Element must not be dynamically connected. Otherwise, the hover color will not take effect.

Step-by-step Tutorial

There are two ways to add hover color to the Tiles Design Element. Follow the option that best suits your needs.

This option allows you to add only one hover color for all the items on your Tiles Design Element. Copy the code below before getting started:

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

Step 1: Edit the ShortPoint Web Part

• Go to the SharePoint page you want to use and click Edit:

• Click the close icon to remove the Toolbox:

• Click the ShortPoint tag.
• Select the Edit Properties icon:

Step 2: Copy the Code

• Copy the Custom CSS code below:

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

CSS

---

Visit our dedicated courses on ShortPoint Academy

Click Here!

Step 3: Edit the Tiles Design Element

NOTE:Before proceeding, make sure you already have the Tiles Design Element on your page. To learn how to add it, check out How to Customize the Tiles Design Element.

• Click the Tiles tag:

• Select the cogwheel icon:

Step 4: Paste the code

• Click the next icon:

• Navigate to the Custom CSS tab.
• Paste the code.
• Customize the background-color value according to your preferences.

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

Step 5: Save

• Once satisfied with your changes, click the green check mark.
• Click the eye icon to see your page in real-time:

• Click Save to apply all your changes:

Option 2: Add Multiple Hover Colors

This option allows you to add different hover colors for each item on your Tiles Design Element. Copy the code below before getting started:

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

NOTES:
[1] If you have more than three items on your Tiles, simply add this line again:

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

Then, change n to the number that corresponds to the new item. For example, if we were to add a fourth item, the line of code would be as follows:

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

[2] If your Tiles have images as background, make sure to add opacity: 1 !important; after .shortpoint-tile-bg-color {. For example, your code will look like this:

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

Step 1: Edit the ShortPoint Web Part

• Go to the SharePoint page you want to use and click Edit:

• Click the close icon to remove the Toolbox:

• Click the ShortPoint tag.
• Select the Edit Properties icon:

Step 2: Copy the Code

• Copy the Custom CSS code below:

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

NOTES:
[1] If you have more than three items on your Tiles, simply add this line again:

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

Then, change n to the number that corresponds to the new item. For example, if we were to add a fourth item, the line of code would be as follows:

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

[2] If your Tiles have images as background, make sure to add opacity: 1 !important; after .shortpoint-tile-bg-color {. For example, your code will look like this:

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

Step 3: Edit the Tiles Design Element

NOTE:Before proceeding, make sure you already have the Tiles Design Element on your page. To learn how to add it, check out How to Customize the Tiles Design Element.

• Click the Tiles tag:

• Select the cogwheel icon:

Step 4: Paste the code

• Click the next icon:

• Navigate to the Custom CSS tab.
• Paste the code.
• Customize the background-color value of each item according to your preferences.

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

Step 5: Save

• Once satisfied with your changes, click the green check mark.
• Click the eye icon to see your page in real-time:

• Click Save to apply all your changes:

That’s it! You can now add hover colors to your Tiles.

Visit our dedicated courses on ShortPoint Academy

Click Here!

Related articles:

• How to Change Grey Text Background in ShortPoint Tiles
• How to Make Tiles Black and White, and Colorful on Hover
• How to Create a Border for Tiles Design Element