How to Disable the Hover Behavior of Image List Items

By default, when you hover over Image List items, they will change color, signifying that they are clickable:

However, if you didn’t have links for your Image List items, this may not be an ideal behavior. This article will demonstrate how to disable the hover effect of Image List items using Custom CSS:

TABLE OF CONTENTS

• Prerequisites
• Interactive Tutorial
• Step-by-step Tutorial
  • Step 1: Edit the ShortPoint Web Part
  • Step 2: Copy the Code
  • Step 3: Edit the Image List
  • Step 4: Paste the code
  • Step 5: Save

Prerequisites

• You must have the latest version of ShortPoint SPFx installed on your SharePoint page.
• You must be a ShortPoint Designer with an active license.
• You must already have an Image List Design Element on your SharePoint page.

Interactive Tutorial

Before starting the interactive tutorial, copy the code below:

.sp-type-image-list-item {
   pointer-events: none !important;
}

Step-by-step Tutorial

Follow the steps to learn how to disable the hover behavior of Image List items:

Step 1: Edit the ShortPoint Web Part

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

• Close the Toolbox:

• Click the Edit properties icon:

Step 2: Copy the Code

• Copy the Custom CSS code below:

.sp-type-image-list-item {
   pointer-events: none !important;
}

NOTEBefore proceeding, make sure you already have an Image List on your page. If you don’t have it yet, check out How to Customize the Image List.

• Click the Image List tag:

• Select the cogwheel icon:

Step 4: Paste the code

• Click the next icon:

• Go to the Custom CSS tab.
• Paste the code in the field provided.

Step 5: Save

• Click the green check mark.
• Click the eye icon to see your page in real-time:

• Save your changes:

Congratulations! You have successfully removed the hover effect on Image List items:

You may also want to check:

• How to change the hover color of the Link 
• How to Make a Transparent Button (Animated on Mouse Hover)