Jump to content

Change image on hover, Wells Family template, gallery pages

Go to solution Solved by tuanphan,

Recommended Posts

Posted (edited)

Hello!

I was hoping to get some help with creating an effect on my site.


I'd like to have images on my gallery grid page display a different image when someone hovers over them. I've been having some trouble finding info on how to do this for the Wells Family 7.0 template.

Any assistance with the basic code here would be great. 
Thanks!

 

 

 

Edited by HeyRockee
Posted

Hi @tuanphan,

Thanks so much for getting back to me here!
I prefer not to share a link since I'm still currently working out whether this is the template I'm going to use. 
I'm pretty familiar with the CSS changes to make, I'm just having trouble figuring out how the gallery block on this template is called out in the code.

Here's a link to a gallery page similar to the one I've got set up -- https://dodecahedron-turkey-mz6k.squarespace.com/ , the password for this site is abc123. Any assistance here would be greatly appreciated!

Thanks again!

- Rockee

  • Solution
Posted
10 hours ago, HeyRockee said:

Hi @tuanphan,

Thanks so much for getting back to me here!
I prefer not to share a link since I'm still currently working out whether this is the template I'm going to use. 
I'm pretty familiar with the CSS changes to make, I'm just having trouble figuring out how the gallery block on this template is called out in the code.

Here's a link to a gallery page similar to the one I've got set up -- https://dodecahedron-turkey-mz6k.squarespace.com/ , the password for this site is abc123. Any assistance here would be greatly appreciated!

Thanks again!

- Rockee

Add this code to Custom CSS box. The code for your example site: https://dodecahedron-turkey-mz6k.squarespace.com/

[data-slide-id="56ddddb6c2ea51bb62417698"]:hover img {
    content: url(https://cdn.pixabay.com/photo/2023/09/20/15/47/fish-8265114_1280.jpg);
}
[data-slide-id="56ddebda8a65e278b3187057"]:hover img {
    content: url(https://cdn.pixabay.com/photo/2023/06/25/11/12/orange-flowers-8087066_1280.jpg);
}
[data-slide-id="56dde1d6044262ef7f9a0b69"]:hover img {
    content: url(https://cdn.pixabay.com/photo/2016/08/13/03/17/sunrise-1590214_1280.jpg);
}
[data-slide-id="56dde02986db4354f98dea14"]:hover img {
    content: url(https://cdn.pixabay.com/photo/2022/11/17/12/45/leaves-7597975_1280.jpg);
}
[data-slide-id="56dde02d86db4354f98dea5f"]:hover img {
    content: url(https://cdn.pixabay.com/photo/2023/08/17/17/03/dahlia-8197027_1280.jpg);
}
[data-slide-id="56dde45c1bbee01913c664a1"]:hover img {
    content: url(https://cdn.pixabay.com/photo/2024/03/02/13/05/orange-parrots-8608540_1280.jpg);
}
[data-slide-id="56dde34d37013b29d28c9a7e"]:hover img {
    content: url(https://cdn.pixabay.com/photo/2023/11/02/16/47/dawn-8361032_1280.jpg);
}
[data-slide-id="56dde0e845bf210da7bf3d2c"]:hover img {
    content: url(https://cdn.pixabay.com/photo/2024/03/15/18/53/magnolia-flower-8635583_1280.jpg);
}
[data-slide-id="56dde4221d07c00cbfe5696c"]:hover img {
    content: url(https://cdn.pixabay.com/photo/2024/05/09/04/11/flamingo-8749724_1280.jpg);
}
[data-slide-id="56dde88f8259b5b05d397793"]:hover img {
    content: url(https://cdn.pixabay.com/photo/2023/10/11/04/08/water-lilies-8307632_1280.jpg);
}
[data-slide-id="56dde5a5f8baf37a65144e08"]:hover img {
    content: url(https://cdn.pixabay.com/photo/2024/04/18/19/56/leaves-8704937_1280.png);
}
[data-slide-id="56dde5a6f699bbba913c022f"]:hover img {
    content: url(https://cdn.pixabay.com/photo/2024/05/09/22/54/penguin-8751952_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!)

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.