Jump to content

Code block for image swap not working on tablet/mobile

Go to solution Solved by Ziggy,

Recommended Posts

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,

image swap on desktop.png

image swap on tablet:mobile.jpeg

Edited by Red_Dot_Design
additional information added
Link to comment

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

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

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

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

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.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

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;
}

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

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? 

IMG_1703.png

Link to comment
  • Solution

I'm suspecting you have something on your website that is causing these issues, can you check on my test website if this code works there for you?

https://quillfish-tangerine-4c2a.squarespace.com/test-layout?password=testing
PW: testing

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
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!

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.