communications@parachutemusic.com

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

 

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

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

Incredible, thank you so much @Ziggy! Life saver.

Really appreciate your help on this - it's working perfectly now 🙂