CooksBay Posted August 31, 2022 Share Posted August 31, 2022 Site URL: https://onion-teal-fz29.squarespace.com/ Hello, I'm trying to create a hover on the images on this page that swap to a different image when hovering. I uploaded two images in custom files, put them in a code block and tried the Custom CSS from a youtube video but it's not working. The images are showing but are stacked on top of eachother. I also need these images to link to different pages on the website. Please help! https://onion-teal-fz29.squarespace.com/wine https://onion-teal-fz29.squarespace.com/ Password: wine Link to comment
Wolfsilon Posted August 31, 2022 Share Posted August 31, 2022 Hmm, I think the easiest way to achieve this is insert the three images and position them where you want them. Take the 3 images you want to display on hover and add them as the background of a pseudo-element. When someone hovers lower the opacity of the original image and raise the opacity of the pseudo-element. You can then add the link to the original element and use that to direct people to where you want them to do on click. Without seeing all three images or being able to replicate the problem, I can't give you a solid code to try. Best, Dan Link to comment
CooksBay Posted August 31, 2022 Author Share Posted August 31, 2022 27 minutes ago, Wolfsilon said: Hmm, I think the easiest way to achieve this is insert the three images and position them where you want them. Take the 3 images you want to display on hover and add them as the background of a pseudo-element. When someone hovers lower the opacity of the original image and raise the opacity of the pseudo-element. You can then add the link to the original element and use that to direct people to where you want them to do on click. Without seeing all three images or being able to replicate the problem, I can't give you a solid code to try. Best, Dan Hi Dan, thanks for your help. Here's the code: For the code block on the page, this is what I used which includes the URLS of the two images. <div class="image-swap"> <img src="https://static1.squarespace.com/static/62f3cffc493e186006918632/t/630f7d2baf5afb34fc1f668c/1661959471742/cabernet-sauvignon-everly-farms-winery-minnesota-wines-mn-web.png"> <img src="https://static1.squarespace.com/static/62f3cffc493e186006918632/t/630f7d465b47932cc38280d3/1661959496503/cabernet-sauvignon-what-are-the-best-wineries-in-mn-b%26w.png"> </div> Then is the Custom CSS part I put this code: <a href=https://everlyfarmswinery.com/cabernet-sauvignon> .imape-swap img:nth-child(1) {position:absolute; transition: 1s; } .imape-swap img:nth-child(1):hover {opacity:0;} </a> Link to comment
Wolfsilon Posted August 31, 2022 Share Posted August 31, 2022 <div class="image-swap" id="swap-one"> <a href="https://example.com"> <img class="top" src="https://static1.squarespace.com/static/62f3cffc493e186006918632/t/630f7d2baf5afb34fc1f668c/1661959471742/cabernet-sauvignon-everly-farms-winery-minnesota-wines-mn-web.png"> <img class="hovered" src="https://static1.squarespace.com/static/62f3cffc493e186006918632/t/630f7d465b47932cc38280d3/1661959496503/cabernet-sauvignon-what-are-the-best-wineries-in-mn-b%26w.png"> </a> </div> Here's what I came up with as a solution for your code block. Below is the CSS. I put an ID in the code above just in case you needed to do some extra targeting for the other images. Here's a link to the code too, if I understood what you wanted to do. https://codepen.io/wolfsilon/pen/vYjBeBY/bcfb77d250bc68ece9eb4e19f4b56039 .image-swap { opacity: 1; max-width: 400px; /* adjust widths */ height: auto; /* adjust height */ position: relative; } .image-swap img { width: 100%; transition: all 0.3s ease; } .hovered { opacity: 0; position: absolute; left: 0; } .image-swap:hover .hovered { opacity: 1; } Link to comment
CooksBay Posted September 1, 2022 Author Share Posted September 1, 2022 This WORKED!!! I can't thank you enough!!! Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment