Zoom Me In Hover - Page Background Image

ImagesPage Sections7.1 Compatible

Jun 22

Written By Ghost

Featured

The Ghost Team

Submitted This Plugin

Description

Add a zoom in effect to page’s background image when hovered. This plugin uses css editor and works with Squarespace 7.1.

How To Install

From your Squarespace account, go to the Custom CSS Editor. Copy and paste the codes below into the Custom CSS Editor box.

// Zoom Me In Hover - Page Section Background Image //

section[data-section-id="1234"] .section-background img {
  transform: scale(1) !important;
  transition: all ease-in-out 1.5s !important;
}

section[data-section-id="1234"]:hover .section-background img {
  transform: scale(1.1) !important;
  transition: all ease-in-out 1.5s !important;
}

Next, you’ll need to locate each page section’s ID that you’d like to target. Use this free Chrome Extension to easily copy each page section’s ID.

Copy the Data-Section-ID for each page section and replace section[data-section-id="1234"] in both areas of the CSS with this code. Adding this ID for the specific page section will add the zoom effect to the background image.