Triggering rollover effect in Squarespace image blocks via trigger sequence in the Caption/ALT
A demo of how to enable custom coding I wrote that allows rollover effects to be applied to selected images by including a trigger character sequence in the image Caption (which gets used as an ALT tag).
The CSS has a rule to match images with alt tags that contain the trigger sequence and then applies a :hover effect.
If you'd like similar functionality adding to your Squarespace website, contact me via the silvabokis website or by commenting on this video.

  • Catrinel Sabaciag
    Catrinel Sabaciag

    thanks a lot. works great!!

  • Heather Salfrank
    Heather Salfrank

    how do I get the caption on to the bottom side of the image?

  • Henry Kerns
    Henry Kerns

    I absolutely love the color rollover effect! Do you know how to remove the caption hover when I click into the light-box? I have do not display captions on, but it still shows up in the light-box. Thanks!

  • Alan McNaron
    Alan McNaron

    Hey, Colin! I added your CSS and the page is incorporating the rollover effects, but how do I hide the caption like in your examples? All my images show the description with ".." at the end.

    • Colin Irwin
      Colin Irwin

      Glad it worked for you, mate.

    • Alan McNaron
      Alan McNaron

      Perfect! You're a genius. These look great. Thanks so much.

    • Colin Irwin
      Colin Irwin

      Hi Alan - you can set "Do not display captions" in the Image block options.

  • Benoit Le Grasse
    Benoit Le Grasse

    Can you show us how you integrate the code please ?

    • Colin Irwin
      Colin Irwin


  • Karl Marl
    Karl Marl

    How often would you need to use those effects? I'm trying to get one image to change to another and it's very frustrating when people are concerned with zooming in on an image about 5%.

    • Colin Irwin
      Colin Irwin

      @Karl Marl Yours is a different use case. You want image swapping, which isn't something that would be easy in Squarespace without additional scripting. The big problem is where do you store and manage the images that appear on rollover? Applying rollover filters to existing images is more straightforward and does have its uses.

  • Kristoffer W. Mikkelsen
    Kristoffer W. Mikkelsen

    Cool effect! Would you share your css as well?

how is Riverdale a real show
Necesito su AYUDA