Jump to content

Remove hover overlay on mobile

Recommended Posts

Posted

Greetings - I managed to put together some very rudimentary CSS code that display the text on an image block on hover over. But then I got stuck.

Here is the code:

/* Code for hover over v2 */
/* Remove square overlay from transparent images*/
#collection-620709cc26e4e10a4e555964 
{
  .sqs-block-image .image-block-outer-wrapper.image-block-v2 .sqs-image-content::after, .sqs-block-image .image-block-outer-wrapper.image-block-v2 .image-overlay {
   position: relative !important;}
}

#collection-620709cc26e4e10a4e555964 
{ 
 
      /*Hide Title and Subtitle on load*/
      .design-layout-poster .image-card-wrapper 
      {
        visibility: hidden;
        opacity:0;
        transition-duration: 0.5s;
      }
      /* Generate the hover effect on hover */
        .design-layout-poster:hover .image-card-wrapper 
      {
        visibility: visible;
        opacity:1;
        background-color: hsla(321, 55%, 42%, 0.31);
      }
      /* Font format title */
      .design-layout-poster .image-title p 
      {
        color: white !important;
        text-transform: none !important;
      }
      
      /* Font format subtitle */
      .design-layout-poster .image-subtitle p 
      {
        color: white !important;
        text-align: left !important;
        text-transform: none !important;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1.4em !important;
      }
  /* Hide on mobile */
@media screen and (max-width:640px) 
{
.design-layout-poster .image-subtitle p  { display: none;}
.design-layout-poster .image-subtitle p  { display: none;}
}
}

The issue that I have is that on mobile sometimes the square overlay stays on if I go "back" on the page; so the page loads correctly on mobile and displays all the images without any test or overlay background. But if I tap on the image / link and then swipe back the purple overlay it present over the image. It doesn't happen all the time.

The goal is to have a simple hover over effect on a block image poster but then just display the image alone on mobile, with the option to tap on it  / link.

Any help / suggestion are really appreciated.

AV

 

  • Replies 1
  • Views 340
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

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.