SSPSNina
-
Posts
3 -
Joined
-
Last visited
Content Type
Forums
Gallery
Blogs
Events
Store
Downloads
Profiles
Posts posted by SSPSNina
-
-
15 hours ago, tuanphan said:
Hi,
Which code you added to first 3 Code Blocks? Can you post here? We can check easier
Thank you for getting back to me. I used this one for all the code blocks, only difference is the websites and image link.
<a href="https://persistnashville.force.com/PersistNashville/s/persist-fund-request">
<div class="image-swap">
<img src="https://static1.squarespace.com/static/5d1b7aeaeedb4900012c21c3/t/62ec4e86eb732b0cd89c0bea/1659653766195/1.png">
<img src="https://static1.squarespace.com/static/5d1b7aeaeedb4900012c21c3/t/62ec4e8b3c1b510f4a8876fc/1659653771448/2.png">And this is the custom CSS code I've put in.
.image-swap img:nth-child(1) {position: absolute; transition: 0.2s}
.image-swap img:nth-child(1):hover {opacity: 0}
-
Site URL: https://www.persistnashville.org/student-resources-copy
Hi,
I was trying to create a clickable image that will change into another image when hovering over it. Because I have zero coding experience, I followed the tutorial posted by Carl Johnson on YT that achieved the exact effects I was going for. However, it's only working in editing mode (see picture attached). If you click on the actual url you'll see that everything, including the non-coding blocks have been squished to the left. I have redone every step in his video twice and the layout is still messed up. I haven't found a fix for this on the forum. Does anyone know how to fix this? Greatly appreciated!
Hover change image code breaking layout
in Customize with code
Posted
Thank you so much. You are a life saver.