Jump to content

Making the slideshow hover effect cover the full image

Recommended Posts

Site URL: https://www.maartenrots.nl/slideshow-test

Hi there,

 

I'm using Brine (Moksha) and want to modify the hover effect on slideshow gallery images. I have found some CSS code that helps me change certain things, but I am not getting to the result I have in mind.

  1. I would like the hover effect to cover the full image, instead of just a small area in the center. It will have to remain clickable as it will link to a page on my website.
  2. On mobile devices I would like the title and description to appear below the image.

I am testing this on the following page: https://www.maartenrots.nl/slideshow-test

At the moment I am using the following (incomplete) code:

.sqs-block-gallery .sqs-gallery-block-slideshow { 

  .meta .meta-inside {
    background-color: rgb(255, 255, 255,);
  }
  .meta-title {
    text-align: center;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 6px 20px;
    color: #042663;
  }

  .meta-description p {
    text-align: center;
    color: #9DB0D8;
    font-size: 12px;
    letter-spacing: 1px;
    padding-top: 4px;
    max-width: 550px;
  }
  .meta-description a:link { 
    color: #9DB0D8;
    text-align: center !important;
  }

  .sqs-gallery-design-stacked-slide:hover {

  }
  @media (max-width : 667px) {
    .meta {
      display: block !important;
      max-width: 70% !important;
      min-width: 70% !important;
      left: 50% !important;
    }
    .meta-title {
      font-size: 12px;
    }
    .meta-description p {
      display: none;
    }
  }
}

I would really appreciate some input, thanks in advance!

Link to comment
  • Replies 3
  • Views 953
  • Created
  • Last Reply

I ended up using a third party plugin to turn the grid gallery inot a masonry-style gallery, found here:  https://www.sqspthemes.com/plugins/masonry-style-squarespace-gallery-plugin

I used the below code to dim the image and make the title appear.
Also, I used <BR><SMALL> in the title to create a subtitle.

/* Hover effect */

.image-slide-anchor:hover {opacity: 0.05}
  .sqs-gallery-block-grid .slide .margin-wrapper {
    display: flex;
    flex-direction: column;
  }
  .image-slide-title {
    pointer-events: none;
}
  @media screen and (min-width: 900px) {
    .sqs-gallery-block-grid .slide .margin-wrapper {
      flex-direction: column-reverse;
    }
    .sqs-gallery-block-grid .slide .margin-wrapper a {
      transform: translateY(15px);
    }
  }
  
  /* Show title on hover */
@media screen and (min-width:901px) {
.image-slide-title {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translate(-50%,-50%);
    opacity: 0;
}
a:hover + .image-slide-title {
    opacity: 1;
}
}
Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.