Custom Code Block Image Sizing

Hello, 

Having some trouble getting images in my code block to display correctly. 

Trying to set up a team page with a hover image swap. My goal is that the images to fill the code block width (padding in between the blocks). Every thing looks correct in my preview window, but when I view the live site the images are full size and don't scale down to fit the block. The hover image is sized correctly, but the initial image is overlapping with the next block. 

Here is the custom CSS I'm using

/*Team Hover Images*/
.image-swap img:nth-child(1){
  position:absolute;
  transition:300ms;
}

.image-swap img:nth-child(1):hover{
  opacity:0;
}

Here is the code block HTML

<div class="image-swap">
    <img src="https://images.squarespace-cdn.com/content/v1/61956c72f3da8549e1b39fc3/1649371276995-H2E7A5890D633FONK44X/KM_headshot_Pro_3.jpg?format=500w">
      <img src="https://images.squarespace-cdn.com/content/v1/61956c72f3da8549e1b39fc3/1649371259500-6LNRHJMQ6HQY851AB3IJ/KM_headshot_Fun_3.jpg?format=500w">
</div>

UPDATE: I found the solution... ended up finding the original tutorial I got the code from. Updated code was pinned in the top comment. https://www.youtube.com/watch?v=7WC906n4t5c 

Quote

It seems like some templates add padding to the right and bottom on the live site  making the second image smaller on hover only on the live site.

add this to your CSS editor replacing YOURBLOCKID with the ID of your block.

YOURBLOCKID {
  padding: 0;
  margin: 17px;
  display: flex;
  align-content: center;
}

If you have multiple blocks with this you can separate the block ID's with commas:

YOURBLOCKID, YOUROTHERBLOCKID {
  padding: 0;
  margin: 17px;
  display: flex;
  align-content: center;
}

Figured I'd update my post with the solution in case it can help someone else. If this is against the forum rules just let me know and I can take the post down. Hope this helps. 
 

Please share your website url 

Hi @tuanphan wondering if you can help us with a similar problem that is described above. We have hover images on a team page as well and we are trying to figure out how to prevent the image code blocks from over lapping one another when the page is scaled down. Can you take a look? Below is the url to the site as well as the password. Thank you in advance! 

https://spinach-circle-hb9w.squarespace.com/firm

PW: DoveLove2022!

42 minutes ago, MinerMan2022 said:

Hi @tuanphan wondering if you can help us with a similar problem that is described above. We have hover images on a team page as well and we are trying to figure out how to prevent the image code blocks from over lapping one another when the page is scaled down. Can you take a look? Below is the url to the site as well as the password. Thank you in advance! 

https://spinach-circle-hb9w.squarespace.com/firm

PW: DoveLove2022!

 

#1. I see you solved

#2. You mean image cut off? I Don't see they overlap.

2 hours ago, tuanphan said:

#1. I see you solved

#2. You mean image cut off? I Don't see they overlap.

Hi @tuanphan if you shrink the window down the images overlap each other. Is there a way to prevent that?

On 7/13/2022 at 9:34 AM, tuanphan said:

Because you used fixed width 350px

When resizing down the screen, the total width of the 4 images is larger than the width of the screen, forcing them to overlap.

Try adding this to Design > Custom CSS

[id*="img-hover"] {
    width: 100% !important;
    background-repeat: no-repeat;
    background-size: cover !important;
    background-position: center center;
}

 

@tuanphan that worked perfectly. Thank you so so much!