How to Apply Zoom on Hover in ShortPoint Tiles Design Element

By default, the ShortPoint Tiles Design Element will give you the option to set an image as your tiles background. In this article, we will show you how to apply a zoom on hover animation for the image in the ShortPoint Tiles Design Element by using custom CSS. 

Before	After

If you would like to apply this solution, please follow the steps in this support article.

Note: ShortPoint Page Builder Live Mode was formerly known as Visual Builder and Grid Mode was formerly known as Wireframe Builder

TABLE OF CONTENTS

• Before we begin
• Step 1. Open the settings of the Tiles Design Element
• Step 2. Copy the custom CSS code
• Step 3. Update the Tiles Design Element with the code
  • 3.1. Switch to the Custom CSS tab
  • 3.2. Paste the copied code
  • 3.3. Confirm your changes
• Result

Before we begin

ShortPoint CSS customizations are available since the ShortPoint version 5.2.2.28 or higher. We recommend you to always have the latest version installed. Visit our Download ShortPoint page and get the latest version of ShortPoint.

To use the solution below, make sure that:

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

Step 1. Open the settings of the Tiles Design Element

Edit the page. Open the settings of the Tiles Design Element:

• In the ShortPoint Page Builder Live Mode :

Locate the Design Element you would like to add the custom CSS and enter the EasyPass Active Mode. Then click the cog wheel icon to open the settings:

The Design tab will open.

• In the ShortPoint Page Builder Grid Mode:

Click the cog wheel icon to open the settings of the Tiles Design Element:

• New ShortPoint Page Builder Grid Mode:

• Legacy Page Builder:

The Settings tab will open.

Step 2. Copy the custom CSS code

Here is the custom CSS code you will need to use for adding a zoom on hover effect in the Tiles Design Element:

.sp-type-tile:hover .shortpoint-advanced-image-content {    
     transform: scale(1.15) !important;    
     transition: all 0.4s ease-out; 
}

Step 3. Update the Tiles Design Element with the code

3.1. Switch to the Custom CSS tab

• In the ShortPoint Page Builder Live Mode:

• In the ShortPoint Page Builder Grid Mode : 

3.2. Paste the copied code

Paste the code from the Step 2 to the Custom CSS field:

• In the ShortPoint Page Builder Live Mode:

You will see the changes applied to your Design Element in real time.

• In the ShortPoint Page Builder Grid Mode : 

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

3.3. Confirm your changes

• In the ShortPoint Page Builder Live Mode :

Click the checkmark button:

• In the ShortPoint Page Builder Grid Mode :

Click Update: 

Finally, save and/or republish the page.

Result

That's it. This is how it may look like on your page:

Related articles:

• How to Make Circular ShortPoint Tiles
• How to Change the Icon Size in Tiles
• How to Change the Color of Link Text and Link Hover in the Tiles Design Element with Custom CSS