Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Image Description on Hover: Grid: Masonry 7.1


Falconer

Question

23 answers to this question

Recommended Posts

  • 1

@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:

Edited by jpeter
Link to comment
  • 1

@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>

 

Edited by jpeter
Remove forEach polyfill since we're not using it
Link to comment
  • 0
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

Link to comment
  • 0

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?

Link to comment
  • 0
.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

Link to comment
  • 0
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!

Link to comment
  • 0
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

Link to comment
  • 0

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 

Link to comment
  • 0
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.

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

my page is still not live so I don't know if you will see it?  I have added 2 screen shots.222459722_Screenshot2020-07-24at23_00_50.thumb.png.7317e5dad424db7fb27cea8ec6b289b9.png

 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 

 

228712622_Screenshot2020-07-24at23_00_57.thumb.png.ee5454104f75b05658811601d7e3e4a4.png

Link to comment
  • 0
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?

Link to comment
  • 0
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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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?

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