Hide and Seek Images (Preview Guide)

Image + Video

Jul 25

Written By Ghost

Live Demo

Super Plugin Info

Works with Squarespace 7.1
Only compatible on Desktop
Requires Personal Plan or Higher
Uses Custom CSS

Step 1. Add this code to Custom CSS

/* ----- EXAMPLE CODE FOR PREVIEW ---- */

function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null ? 0 : ipsum.sit;
  dolor = sit - amet(dolor);
  return sit ? consectetur(ipsum, 0, dolor < 0 ? 0 : dolor) : [];
    }
function adipiscing(...elit) {
  if (!elit.sit) {
    return [];
  const sed = elit[0];
  dolor = sit - amet(dolor);
  return eiusmod.tempor(sed) ? sed : [sed];
    }
    
/* ----- EXAMPLE CODE FOR PREVIEW ---- */

Step 2. Customizable Options

These options are available in Custom CSS.

Hide Image (Static)
Show Image (On Hover)
Hover Fade Transition Speed
Expand Inner Image (On Hover)
Hide or Show On Mobile

Step 3. Add an Image Block

Add an image block to any page section and upload an image. Repeat for each image block.

You can arrange the image blocks anywhere in the page section. Place them close together or spread them apart. Get creative, it’s up to you!

Step 4. Apply Hide and Seek Setting

Next, add the text hide-seek to the image block’s image alt text box. This tells the plugin to apply itself to this image block. Repeat for all image blocks.

⚠️ Important: This setting is required for the plugin to work, don’t miss it.

Plugin Notes

Only compatible on desktop.
Only compatible with image blocks.
Option to hide image blocks on mobile in Custom CSS.
If the image is replaced, you must add hide-seek again to the image block.

Troubleshooting (Plugin Not Working)

The hide-seek text has been added to the image’s alt text box.
Only compatible with image blocks and will not work with other images and galleries.

Squarespace 7.1

Ghost http://www.ghostplugins.com