Jump to content

communications@parachutemusic.com

Go to solution Solved by Ziggy,

Recommended Posts

Site URL: https://www.parachutemusic.com/studios-copy-2

Hi there!

I'm building a web page that introduces some of our staff - and when you hover over the images of each person, it comes up with some text about them (as a hover function).

I've done custom CSS, to get this hover text happening. However - the text goes well beyond the edges of the poster image! And it looks really bad on mobile.

Is there any code I can add here that makes this hover text automatically be confined to the edges of the poster image size? That would translate to any device?

I've attached photos of the section I mean - and the password to this site is testtest

Thanks,

Jane

 

Screen Shot 2022-10-11 at 6.05.17 PM.png

Screen Shot 2022-10-11 at 6.06.14 PM.png

Screen Shot 2022-10-11 at 6.13.13 PM.png

Edited by parachutemusic
Link to comment
  • Solution

The simplest way to get it to fit would be to create a bit more space, as well as scale the font based on the screen width. Maybe make the images closer to a square. and adjust the font size on mobile using vw instead of px to scale the font (font-size:4vw; scales the font to 4% of the viewport width). Hope that helps!

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

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

  Did I help? Buy me a coffee?

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

Link to comment

Thank you so much @Ziggy !

That code worked, it's looking much better!

I'm also wondering if there's a way to have it so that the text doesn't come up at all on mobile sites, but does come up when you hover over the images on desktop sites?

At the moment, the text is static over the images on the mobile sites. Is there a way to make the text only appear on desktop (not mobile)?
 

Here's the code I'm using now:

 

@media only screen and (min-width: 660px)

 {
.design-layout-poster .image-card-wrapper {
  visibility: hidden;
  opacity: 0;
  transition-duration: 1s;
}

.design-layout-poster:hover .image-card-wrapper {
  visibility: visible;
  opacity: 1;
  background-color: hsla(113, 37%, 0%, 0.57);
  font-size: 4vw;
}
}

Edited by parachutemusic
Link to comment

 

@media only screen and (min-width: 660px)

 {
.design-layout-poster .image-card-wrapper {
  visibility: hidden;
  opacity: 0;
  transition-duration: 1s;
}

.design-layout-poster:hover .image-card-wrapper {
  visibility: visible;
  opacity: 1;
  background-color: hsla(113, 37%, 0%, 0.57);
  font-size: 4vw;
}
}
@media only screen and (max-width: 660px)

 {
.design-layout-poster .image-card-wrapper {
  visibility: hidden;
  opacity: 0;
}

.design-layout-poster:hover .image-card-wrapper {
  visibility: hidden;
  opacity: 0;
}
}

 

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

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

  Did I help? Buy me a coffee?

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

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.