Jump to content

Hover Card + Change Image Background

Recommended Posts

Hello, 

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.

hover-card-1-min.png.3f106e9f45c98d85cbae75afc7f528f5.png

#2. Install Squarespace ID Finder

https://chromewebstore.google.com/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

to find ID of section and 3 Text Blocks.

In my example we will have

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

image.png.1555e2ffaa4ee22bce0aead310179180.png

Text Block IDs: 

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

hover-card-2-min.png.451cf8a246303e905ee2a722a4911be7.png

#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;
}}

image.png.cdf3ce2d5b3720dc6a2da1316e0ca251.png

Result

image.png.4ad1e6a72e74e7d5a750f636a785d16d.png

#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);
}

image.thumb.png.a525241a3635074dc9e61f646ede13af.png

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.