Code block for image swap not working on tablet/mobile

Hello,

For my sites homepage, I have created an image swap using custom CSS and code blocks. The intention of this was to replicate a title and colour opacity on hover. This function is currently not available on image blocks which is why I did it this way.  

This works well on desktop (screenshot attached) but on mobile it appears as per the other screenshot. 

My site and password: 

https://gopher-tomato-twpa.squarespace.com/

Password: hello

The code I have used is here: 

  //image change on hover//

.image-swap {
  opacity: 1;
  max-width: 600px; /* adjust widths */
  height: auto; /* adjust height */
  position: relative;
}
.image-swap img {
  width: 100%;
  transition: all 0.2s ease;
}
.hovered {
  opacity: 0;
  position: absolute;
  left: 0;
}
.image-swap:hover .hovered {
  opacity: 1;
}
 

Thank you,

Bizarrely, this problem appears as soon as I inspect the page, no matter the screensize. Where did you get the code?

I got the code from here:

https://originalbox.co/blog/squarespace-image-hover-effect

You'll need to scroll halfway down the page to find the section titled, "Squarespace Image Change on Hover"

Do you still see the same behaviour if you just have the one image/code block on the page?

I've just checked this and yes the same thing happens. 

Sorry, I can't really explain that. Given that you're coding this, it may be easier just to have the image and add the overlay and text in code too instead of having it in a second image, should be relatively straightforward.

Would you be able to give me the code for adding a link and colour + title overlay to an image block? 

Sure thing, try this:

HTML for a code block:

<div class="image-overlay-container">
  <a href="/portfolio">
    <img class="image" src="https://images.squarespace-cdn.com/content/v1/646f55f280e63d049e7cbdd8/a567a255-0995-4be4-9092-e0a2a5cb930d/Services.png">
    <div class="overlay">
      <div class="text">Portfolio</div>
    </div>
  </a>
</div>

Custom CSS:

.image-overlay-container {
  position: relative;
}
.image {
  display: block;
  width: 100%;
  height: auto;
}
.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: 600ms ease-in-out;
  background-color: rgb(141, 123, 119);
}
.image-overlay-container:hover .overlay {
  opacity: 0.8;
}
.text {
  color: white;
  font-size: 34px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

Thank you, that fixed the image shifting issue and the overlay on hover looks great! 😊

The attached is what I see when it's on a mobile/tablet device (the text shows under the image instead of on hover). Is there anyway to fix this so it has the colour and title overlay as per the desktop version? 

Ah I did! I've removed the image swap code and that fixed it. You're fab, thanks so much! 

6 minutes ago, Red_Dot_Design said:

Ah I did! I've removed the image swap code and that fixed it. You're fab, thanks so much! 

No problem! Glad to help!