Hover change image code breaking layout

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!

Hi,

Which code you added to first 3 Code Blocks? Can you post here? We can check easier

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}

On 8/12/2022 at 1:02 AM, SSPSNina said:

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}

This code is missing 2 closing tags

<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">

It should be

<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">
  </div>
</a>

On 8/13/2022 at 7:23 PM, tuanphan said:

This code is missing 2 closing tags

<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">

It should be

<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">
  </div>
</a>

 

Thank you so much. You are a life saver.