HeyRockee Posted June 1 Posted June 1 (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 June 1 by HeyRockee
tuanphan Posted June 2 Posted June 2 Can you share link to gallery page? we can check easier 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!)
HeyRockee Posted June 2 Author Posted June 2 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 tuanphan Posted June 3 Solution Posted June 3 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); } Lesum 1 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!)
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment