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

Could someone please help me to apply this sort of image hover http://www.erinsanger.com/ to a gallery reel? I would love for a hover the gallery images to darken and then for the caption text to show on top in white.

I saw this previous thread, which served a similar function but for a gallery page:

Thank you!

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>

Thank you so much Caroline! This worked great.

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

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>

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!

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

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! 

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! 

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;

}

That worked perfectly @Caroline_Smith. Thank you so much for your help.

On 2/14/2022 at 11: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, I am trying to implement this line of code into my site but I am coming across the issue of the url being expired. Is there a solution you could provide for me? Thanks

On 2/6/2024 at 1:25 AM, natebrunt said:

Hi  I am trying to implement this line of code into my site but I am coming across the issue of the url being expired. Is there a solution you could provide for me? Thanks

Can you share link to your site & take a screenshot of error "expired"?