Image Description on Hover: Grid: Masonry 7.1

Site URL: https://round-mouse-b95a.squarespace.com/

Hi guys,

In 7.1 I want the masonry grid gallery on my homepage to show text descriptions on rollover. I've been searching everywhere for this code and have managed to find code that darkens the images but doesn't show the link title. 

My Site

Password: thefalcon

Any ideas?

Many thanks,

Martin

Hey @Falconer do you have your gallery set to display a caption?

3 hours ago, RyanDejaegher said:

Hey @Falconer do you have your gallery set to display a caption?

I have now...

@Falconer, was there no option to show the title only on hover?

no option for that no

There is the option to bed the caption in the image png.. just not the cleanest method and means the text will also darken on rollover 

@Falconer You can try adding the CSS below to the page

.gallery-caption-grid-masonry {
  opacity: 0;
  z-index: -1;
  transition: all .2s;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  text-align: center;
  color: #fff;
  height: 100%;
  padding: 0;
}


.gallery-masonry-item:not(.has-clickthrough) .gallery-caption-grid-masonry:before {
  background-color: rgba(0, 0, 0, 0.4);
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  opacity: 0;
  transition: all .5s;
}

.gallery-masonry-item.has-clickthrough:hover .gallery-caption-grid-masonry {
  z-index: 0;
  opacity: 1;
  height: auto;
}

.gallery-masonry-item:not(.has-clickthrough):hover .gallery-caption-grid-masonry {
  z-index: 0;
  opacity: 1;
}


.gallery-masonry-item:hover .gallery-caption-grid-masonry:before {
  opacity: 1;
  transition: all .5s;
}

.gallery-caption-grid-masonry .gallery-caption-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-caption-grid-masonry p.gallery-caption-content {
  z-index: 1000;
  font-size: 1.3rem;
}

This will add the following effect:

31 minutes ago, jpeter said:

@Falconer You can try adding the CSS below to the page

.gallery-caption-grid-masonry {
  opacity: 0;
  z-index: -1;
  transition: all .2s;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  text-align: center;
  color: #fff;
  height: 100%;
  padding: 0;
}


.gallery-masonry-item:not(.has-clickthrough) .gallery-caption-grid-masonry:before {
  background-color: rgba(0, 0, 0, 0.4);
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  opacity: 0;
  transition: all .5s;
}

.gallery-masonry-item.has-clickthrough:hover .gallery-caption-grid-masonry {
  z-index: 0;
  opacity: 1;
  height: auto;
}

.gallery-masonry-item:not(.has-clickthrough):hover .gallery-caption-grid-masonry {
  z-index: 0;
  opacity: 1;
}


.gallery-masonry-item:hover .gallery-caption-grid-masonry:before {
  opacity: 1;
  transition: all .5s;
}

.gallery-caption-grid-masonry .gallery-caption-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-caption-grid-masonry p.gallery-caption-content {
  z-index: 1000;
  font-size: 1.3rem;
}

This will add the following effect:

 

You did it! Thanks so much and I'm sure this will be a help to many others searching

This is a pretty small detail but I don't suppose there's a way for the caption to also support the clickthrough url? Currently when you rollover the text you get the text edit cursor. I guess it's not a big deal, just wondering if there's an easy fix?

I suppose what I'm asking is, can the text in the gallery be 'unselectable'? 

.gallery-caption-grid-masonry p.gallery-caption-content {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; 
}

I added this which is a start - it makes the text non-selectable. But the captioned part of the image still doesn't support clickthrough

@Falconer You can add the JS below. This will treat the text as a clickable.

JavaScript

(function(document){

  if(document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }

  function init(){
    addClosestPolyfill();

    delegate(document, 'click', '.gallery-caption-grid-masonry', function(evt){
      var item = evt.target.closest('.gallery-masonry-item.has-clickthrough');
      if(item) {
        item.querySelector('a').click();
      }
    });
  }

  function delegate (target, eventName, selector, handler) {
    target.addEventListener(eventName, function (event) {
      if (matches(event)) {
        handler(event);
      }
    });

    function matches(event) {
      const element = event.target.closest(selector);
      return element !== null;
    };
  }

  function addClosestPolyfill(){
    if (!Element.prototype.matches) {
      Element.prototype.matches = Element.prototype.msMatchesSelector || 
                                  Element.prototype.webkitMatchesSelector;
    }
    
    if (!Element.prototype.closest) {
      Element.prototype.closest = function(s) {
        var el = this;
    
        do {
          if (Element.prototype.matches.call(el, s)) return el;
          el = el.parentElement || el.parentNode;
        } while (el !== null && el.nodeType === 1);
        return null;
      };
    }
  }

})(document);

Be sure to add the code to <script> tags, example:

<script>
  // add js code here
</script>

44 minutes ago, jpeter said:

@Falconer You can add the JS below. This will treat the text as a clickable.

JavaScript

(function(document){

  if(document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }

  function init(){
    addForEachPolyfill();
    addClosestPolyfill();

    delegate(document, 'click', '.gallery-caption-grid-masonry', function(evt){
      var item = evt.target.closest('.gallery-masonry-item.has-clickthrough');
      if(item) {
        item.querySelector('a').click();
      }
    });
  }

  function delegate (target, eventName, selector, handler) {
    target.addEventListener(eventName, function (event) {
      if (matches(event)) {
        handler(event);
      }
    });

    function matches(event) {
      const element = event.target.closest(selector);
      return element !== null;
    };
  }

  function addClosestPolyfill(){
    if (!Element.prototype.matches) {
      Element.prototype.matches = Element.prototype.msMatchesSelector || 
                                  Element.prototype.webkitMatchesSelector;
    }
    
    if (!Element.prototype.closest) {
      Element.prototype.closest = function(s) {
        var el = this;
    
        do {
          if (Element.prototype.matches.call(el, s)) return el;
          el = el.parentElement || el.parentNode;
        } while (el !== null && el.nodeType === 1);
        return null;
      };
    }
  }

  function addForEachPolyfill(){
    if (window.NodeList && !NodeList.prototype.forEach) {
        NodeList.prototype.forEach = Array.prototype.forEach;
    }
  }

})(document);

Be sure to add the code to <script> tags, example:

<script>
  // add js code here
</script>

 

Many thanks for this. I'm going away to learn about adding JavaScript to Squarespace and then I'll let you know how I got on!

On 6/19/2020 at 10:00 PM, jpeter said:

@Falconer You can add the JS below. This will treat the text as a clickable.

JavaScript

(function(document){

  if(document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }

  function init(){
    addClosestPolyfill();

    delegate(document, 'click', '.gallery-caption-grid-masonry', function(evt){
      var item = evt.target.closest('.gallery-masonry-item.has-clickthrough');
      if(item) {
        item.querySelector('a').click();
      }
    });
  }

  function delegate (target, eventName, selector, handler) {
    target.addEventListener(eventName, function (event) {
      if (matches(event)) {
        handler(event);
      }
    });

    function matches(event) {
      const element = event.target.closest(selector);
      return element !== null;
    };
  }

  function addClosestPolyfill(){
    if (!Element.prototype.matches) {
      Element.prototype.matches = Element.prototype.msMatchesSelector || 
                                  Element.prototype.webkitMatchesSelector;
    }
    
    if (!Element.prototype.closest) {
      Element.prototype.closest = function(s) {
        var el = this;
    
        do {
          if (Element.prototype.matches.call(el, s)) return el;
          el = el.parentElement || el.parentNode;
        } while (el !== null && el.nodeType === 1);
        return null;
      };
    }
  }

})(document);

Be sure to add the code to <script> tags, example:

<script>
  // add js code here
</script>

 

The code checks out. Many thanks for your help jpeter and I'm sure many others will find it helpful

hi 

I have added this code to my gallery but the background opacity does not show so text is hard to read.  

also on mobile view the caption fits the whole image, can this be resized smaller? 

Thanks so much 

On 7/23/2020 at 5:00 AM, ema1 said:

hi 

I have added this code to my gallery but the background opacity does not show so text is hard to read.  

also on mobile view the caption fits the whole image, can this be resized smaller? 

Thanks so much 

Can you share link to gallery page? We can help easier.

my page is still not live so I don't know if you will see it?  I have added 2 screen shots.

 The first is the desktop view, with hover on first image.  The text shows up but no background opacity, just text on the image.  This is ok on the dark image but more difficult to see on the pale images.  

Below is the mobile view.  The text fills the whole box so I wan to resize smaller for a mobile version.  The click through doesn't work because the text fills so much of the box.  

Any help to reduce the size of the text in the mobile view would be amazing. Thank you 

You can setup password & share url

my site is now live www.emmawrightphotography.com so you can have a look.  Thanks so much 

On 6/19/2020 at 9:35 AM, jpeter said:

@Falconer You can try adding the CSS below to the page

.gallery-caption-grid-masonry {
  opacity: 0;
  z-index: -1;
  transition: all .2s;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  text-align: center;
  color: #fff;
  height: 100%;
  padding: 0;
}


.gallery-masonry-item:not(.has-clickthrough) .gallery-caption-grid-masonry:before {
  background-color: rgba(0, 0, 0, 0.4);
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  opacity: 0;
  transition: all .5s;
}

.gallery-masonry-item.has-clickthrough:hover .gallery-caption-grid-masonry {
  z-index: 0;
  opacity: 1;
  height: auto;
}

.gallery-masonry-item:not(.has-clickthrough):hover .gallery-caption-grid-masonry {
  z-index: 0;
  opacity: 1;
}


.gallery-masonry-item:hover .gallery-caption-grid-masonry:before {
  opacity: 1;
  transition: all .5s;
}

.gallery-caption-grid-masonry .gallery-caption-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-caption-grid-masonry p.gallery-caption-content {
  z-index: 1000;
  font-size: 1.3rem;
}

This will add the following effect:

 

@jpeter ive used this code and it works great but when the image has a link attached to it it removed the colour overlay. do you know of how to adjust this?

@tuanphan i'm having a similar issue if you can shed some light i would be very grateful

I have edited the code to add a background colour to images with links attached to them but i do want it to behave like the 3 and 4 test images

www.dhaydendesign.com/portfolio-test

On 11/29/2020 at 1:36 AM, danielhaydenh said:

@tuanphan i'm having a similar issue if you can shed some light i would be very grateful

I have edited the code to add a background colour to images with links attached to them but i do want it to behave like the 3 and 4 test images

www.dhaydendesign.com/portfolio-test

The url doesn't exist

On 11/28/2020 at 1:28 PM, danielhaydenh said:

@jpeter ive used this code and it works great but when the image has a link attached to it it removed the colour overlay. do you know of how to adjust this?

I’m having this problem as well. Has it been resolved yet?

2 hours ago, sharine said:

I’m having this problem as well. Has it been resolved yet?

Try this guide.

On 6/19/2020 at 3:35 AM, jpeter said:

@Falconer You can try adding the CSS below to the page

.gallery-caption-grid-masonry {
  opacity: 0;
  z-index: -1;
  transition: all .2s;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  text-align: center;
  color: #fff;
  height: 100%;
  padding: 0;
}


.gallery-masonry-item:not(.has-clickthrough) .gallery-caption-grid-masonry:before {
  background-color: rgba(0, 0, 0, 0.4);
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  opacity: 0;
  transition: all .5s;
}

.gallery-masonry-item.has-clickthrough:hover .gallery-caption-grid-masonry {
  z-index: 0;
  opacity: 1;
  height: auto;
}

.gallery-masonry-item:not(.has-clickthrough):hover .gallery-caption-grid-masonry {
  z-index: 0;
  opacity: 1;
}


.gallery-masonry-item:hover .gallery-caption-grid-masonry:before {
  opacity: 1;
  transition: all .5s;
}

.gallery-caption-grid-masonry .gallery-caption-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-caption-grid-masonry p.gallery-caption-content {
  z-index: 1000;
  font-size: 1.3rem;
}

This will add the following effect:

 

Might be a dumb question (as I'm so new to this)...but, I put in your code and it worked brilliantly...but once I assigned a link to my image, the image no longer darkens on rollover. How do I get it to both darken and link?