Minimal design with hover mode (7.0 & 7.1 CE) - Image Block Card

All CSS tricks7.07.17.1 CEHover/overlayCool look
Written By Beatriz Caraballo

About

Looking for a quick way to spruce up your Card Image Blocks? You got it!

This code snippet will allow you to create a rounded minimal style in no time, and allow you to adjust the background color, border radius, shadow intensity, space around the content and hover mode position.

Please note: this snippet WILL NOT make your cards match in height when placing them side-by-side.

  • This particular snippet is compatible with:

    • Image Block Card layout

    • Squarespace 7.0

    • Squarespace 7.1 (Classic Editor section)

Beatriz Caraballo

Hey! I’m B, a customization expert.

I code the heck out of Squarespace and teach other designers how to do it too, one wtf at a time.

https://beatrizcaraballo.com
Previous

Same height for image and content (7.0 & 7.1 CE) - Image Block Card
Next

Alternative image on hover (7.0 & 7.1 CE) - Image Block Card