How can we help you today?

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 applying custom CSSAfter applying custom css

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


Before we begin

ShortPoint CSS customizations are available since the ShortPoint version 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 Visual Builder:

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:

Open the settings of the Tiles Design Element

The Design tab will open.

  • In the Wireframe Builder:

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

  • New Wireframe Builder:

In the new wireframe builder

  • Legacy Wireframe Builder:

Legacy wireframe 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; 

Please copy the code to the clipboard.

Step 3. Update the Tiles Design Element with the code

3.1. Switch to the Custom CSS tab

  • In the Visual Builder:

Tiles Design Element Custom CSS tab

  • In the Wireframe Builder: 

In wireframe builder, go to custom css

3.2. Paste the copied code

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

  • In the Visual Builder:

paste the code

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

  • In the Wireframe Builder: 

paste the code in the custom css section

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

Click the preview button

3.3. Confirm your changes

  • In the Visual Builder:

Click the checkmark button:

click the checkmark button

  • In the Wireframe Builder:

Click Update

Click Update to save the settings

Finally, save and/or republish the page.


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

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