Jump to content

Hover Card + Change Image Background

Recommended Posts


I have two questions on how to customize hover effects using a Simple List in a Services Section. I would like to know how to: 

1) Make a card appear when you hover a specific list item.

2) Make the background change when you hover over a specific list item. 

An example is www.equinox.com on The Spa, Stretch & Recovery, HeadStrong Meditation. I've also attached images. 

Thank you!

Screenshot 2024-05-28 at 9.19.19 AM.png

Screenshot 2024-05-28 at 9.19.26 AM.png

Link to comment

Great questions.

I would also like to add to this question, point out in mobile it obviously does not have the hover effect but basically has a sliding carousel effect. How do you encorporate this with the desktop version that OP posted about, knowing mobile has no hover functionality.

Link to comment

#1. First, you add a Section with Section Image and 3 Text Blocks. Something like this.


#2. Install Squarespace ID Finder


to find ID of section and 3 Text Blocks.

In my example we will have

Section ID: section[data-section-id="665d41c97157c1384716ae4a"]


Text Block IDs: 

  • #block-yui_3_17_2_1_1717387601915_38558
  • #block-ca59c0f913c5ff74ae88
  • #block-bb0e659c7b70a93c6962


#3. Use this code to Website > Website Tools > Custom CSS to achieve text white background when hover text.

section[data-section-id="665d41c97157c1384716ae4a"] {
.html-block:hover {
    background-color: white;
.html-block:hover * {
    color: #000;
.html-block {
    padding: 10px;




#4. Use this code to Custom CSS box to change background image when hover on each text card. Replace Pixabay with your new image url.

section[data-section-id="665d41c97157c1384716ae4a"]:has(#block-yui_3_17_2_1_1717387601915_38558:hover) .section-border img {
    content: url(https://cdn.pixabay.com/photo/2016/08/13/03/17/sunrise-1590214_1280.jpg);
section[data-section-id="665d41c97157c1384716ae4a"]:has(#block-ca59c0f913c5ff74ae88:hover) .section-border img {
    content: url(https://cdn.pixabay.com/photo/2017/08/04/16/59/beach-2580656_1280.jpg);
section[data-section-id="665d41c97157c1384716ae4a"]:has(#block-bb0e659c7b70a93c6962:hover) .section-border img {
    content: url(https://cdn.pixabay.com/photo/2023/01/05/13/34/rose-7698947_1280.jpg);


Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.