Jump to content

How to Darken Images on Hover + Show Caption for Gallery Reel Images

Recommended Posts

Hi!

Assuming this is a 7.1 template since you mentioned gallery reels, here is the code snippet to accomplish that. It only works on the "Simple Grid" layout, and the original gallery view will be displayed on mobile devices. Add this to the relevant page's header code injection, and it should work!

 

<style>
  /* Appear on Hover */
  @media(min-width: 768px) {
    figure.gallery-grid-item {
      position: relative;
    }
    figcaption.gallery-caption.gallery-caption-grid-simple {
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
      left: 50%;
      text-align: center;
      color: #ffffff;
      z-index: 999999;
      opacity: 0;
      transition: opacity .3s;
    }
    figcaption.gallery-caption.gallery-caption-grid-simple p {
      font-size: 20px;
    }
    figure.gallery-grid-item:after {
      position: absolute;
      content: "";
      background: rgba(0, 0, 0) !important;
      opacity: 0;
      transition: opacity .3s;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      right: 0;
      bottom: 0;
    }
    figure.gallery-grid-item:hover:after {
      opacity: 0.4;
      transition: opacity .3s;
    }
    figure.gallery-grid-item:hover figcaption.gallery-caption.gallery-caption-grid-simple {
      opacity: 1;
      transition: opacity .3s;
    }
    .sqs-block-content:hover figcaption {
      opacity: 1;
      transition: opacity .3s;
    }
  }
</style>

 

Link to comment
1 hour ago, sa51 said:

Thank you so much Caroline! This worked great.

Although is there a way to keep the clickthrough links active?

Absolutely! Here is a new code block you will need to add in order to have this affect for simple gallery items with links. The JS code snippet is necessary so that the text is linked along with the image. Add this to the header code injection of the relevant page

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $(".gallery-grid-item").each(function() {
      var href = $(this).find(".gallery-grid-item-link").attr("href");
      $(this).find(".gallery-caption .gallery-caption-content").wrap('<a href="' + href + '"></a>');
    });
  });
</script>

<style>
  /* Appear on Hover */
  @media(min-width: 768px) {
    figure.gallery-grid-item {
      position: relative;
    }
    figcaption.gallery-caption {
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
      left: 50%;
      text-align: center;
      color: #ffffff;
      z-index: 999999;
      opacity: 0;
      transition: opacity .3s;
      padding: 0 !important;
    }
    figcaption.gallery-caption p {
      font-size: 20px !important;
    }
    figure.gallery-grid-item .gallery-grid-item-wrapper > a:after {
      position: absolute;
      content: "";
      background: rgba(0, 0, 0) !important;
      opacity: 0;
      transition: opacity .3s;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      right: 0;
      bottom: 0;
      z-index: 1;
    }
    figure.gallery-grid-item:hover .gallery-grid-item-wrapper > a:after {
      opacity: 0.4;
      transition: opacity .3s;
    }
    figure.gallery-grid-item:hover figcaption.gallery-caption {
      opacity: 1;
      transition: opacity .3s;
    }
    .sqs-block-content:hover figcaption {
      opacity: 1;
      transition: opacity .3s;
    }
  }
</style>

 

Edited by Caroline_Smith
Link to comment
On 2/14/2022 at 9:07 PM, Caroline_Smith said:

Absolutely! Here is a new code block you will need to add in order to have this affect for simple gallery items with links. The JS code snippet is necessary so that the text is linked along with the image. Add this to the header code injection of the relevant page

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $(".gallery-grid-item").each(function() {
      var href = $(this).find(".gallery-grid-item-link").attr("href");
      $(this).find(".gallery-caption .gallery-caption-content").wrap('<a href="' + href + '"></a>');
    });
  });
</script>

<style>
  /* Appear on Hover */
  @media(min-width: 768px) {
    figure.gallery-grid-item {
      position: relative;
    }
    figcaption.gallery-caption {
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
      left: 50%;
      text-align: center;
      color: #ffffff;
      z-index: 999999;
      opacity: 0;
      transition: opacity .3s;
      padding: 0 !important;
    }
    figcaption.gallery-caption p {
      font-size: 20px !important;
    }
    figure.gallery-grid-item .gallery-grid-item-wrapper > a:after {
      position: absolute;
      content: "";
      background: rgba(0, 0, 0) !important;
      opacity: 0;
      transition: opacity .3s;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      right: 0;
      bottom: 0;
      z-index: 1;
    }
    figure.gallery-grid-item:hover .gallery-grid-item-wrapper > a:after {
      opacity: 0.4;
      transition: opacity .3s;
    }
    figure.gallery-grid-item:hover figcaption.gallery-caption {
      opacity: 1;
      transition: opacity .3s;
    }
    .sqs-block-content:hover figcaption {
      opacity: 1;
      transition: opacity .3s;
    }
  }
</style>

 

Hi @Caroline_Smith we are trying to achieve a similar solution to what you helped with above. Our site is https://spinach-circle-hb9w.squarespace.com/firm and the password to view it is DoveLove2022!

If you scroll down to "meet the team" there are two headshots we would like to apply a darkened hover affect with bio text over the photo. We've tried a few things but we are running into different issues with the text being too big or the hover background not covering the full image. Any advice you have would be greatly appreciated. Thank you!

Link to comment
On 2/18/2022 at 8:25 PM, MinerMan2022 said:

Hi @Caroline_Smith we are trying to achieve a similar solution to what you helped with above. Our site is https://spinach-circle-hb9w.squarespace.com/firm and the password to view it is DoveLove2022!

If you scroll down to "meet the team" there are two headshots we would like to apply a darkened hover affect with bio text over the photo. We've tried a few things but we are running into different issues with the text being too big or the hover background not covering the full image. Any advice you have would be greatly appreciated. Thank you!

Hello! I actually answered a very similar question here a few weeks ago that uses image block posters. Try this out and let me know how it works.

The first code snippet should be used if you don't want the images to link anywhere. The second one should be used if you want the images to have links:

[data-section-id="6206d3387ee6ce5e6524ea0e"] {
  .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;
  }
  /* Appear on Hover */
  @media(min-width: 768px) {
    .sqs-block-content .sqs-block-image-figure:after {
      position: absolute;
      content: "";
      background: #000000 !important;
      opacity: 0;
      transition: opacity .3s;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      right: 0;
      bottom: 0;
    }
    .sqs-block-content figcaption {
      opacity: 0;
      transition: opacity .3s;
    }
    .sqs-block-content:hover .sqs-block-image-figure:after {
      opacity: 0.5;
      transition: opacity .3s;
    }
    .sqs-block-content:hover figcaption {
      opacity: 1;
      transition: opacity .3s;
    }
  }
  @media(max-width: 768px) {
    .sqs-block-content figcaption {
      position: relative !important;
      align-items: left !important;
      justify-content: left !important;
      margin-top: 10px;
    }
    .sqs-block-content figcaption h3,
    .sqs-block-content figcaption h2,
    .sqs-block-content figcaption h1,
    .sqs-block-content figcaption h4,
    .sqs-block-content figcaption p {
      color: #ffffff !important;
    }
  }
}

 

 

[data-section-id="6206d3387ee6ce5e6524ea0e"] {
.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;
  }
  .sqs-block-content figcaption h3 {
    color: #ffffff !important;
  }
  .sqs-block-content figcaption h2 {
    color: #ffffff !important;
  }
  .sqs-block-content figcaption h1 {
    color: #ffffff !important;
  }
  .sqs-block-content figcaption h4 {
    color: #ffffff !important;
  }
  .sqs-block-content figcaption p {
    color: #ffffff !important;
  }
  /* Appear on Hover */
  @media(min-width: 768px) {
    .sqs-block-content .sqs-block-image-figure a:after {
      position: absolute;
      content: "";
      background: #000000 !important;
      opacity: 0;
      transition: opacity .3s;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      right: 0;
      bottom: 0;
    }
    .sqs-block-content figcaption {
      opacity: 0;
      transition: opacity .3s;
    }
    .sqs-block-content:hover .sqs-block-image-figure a:after {
      opacity: 0.5;
      transition: opacity .3s;
    }
    .sqs-block-content:hover figcaption {
      opacity: 1;
      transition: opacity .3s;
    }
  }
  @media(max-width: 768px) {
    .sqs-block-content figcaption {
      position: relative !important;
      align-items: left !important;
      justify-content: left !important;
      margin-top: 10px;
    }
  }
}

 

Link to comment
On 2/22/2022 at 8:09 AM, MinerMan2022 said:

Thank you @Caroline_Smith It looks like we are almost there, but we were actually wanting the darker hover box to cover the full photo, right now its only partially covering it. Is there anyway to make it cover the full photo? Thank you again for your help! 

Screen Shot 2022-02-22 at 8.07.46 AM.png

After investigating this issue on your account some more, it seems like you have some CSS styling that makes the height of the caption wrapper only 75% of the container instead of 100%. Do you know if that's something you added? I think if you just change that CSS rule (or add a new one that matches the below selector) to have a max-height of 100%, that will fix your problem.

.sqs-block-image .image-block-outer-wrapper:not(.image-block-v2).layout-caption-overlay-hover:hover .image-caption-wrapper, .sqs-block-image .image-block-outer-wrapper:not(.image-block-v2).layout-caption-overlay-hover :focus+.image-caption-wrapper {

    max-height: 75%; 

    opacity: 1;

    visibility: visible;

}

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.