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

Gallery Caption with clickable Hover effect for 7.1

Question

Hi Tuanphan, I am trying add a hover effect to a 'simple grid' gallery. On hover the image darkens slightly and a caption appears, which is great, but the way I have built this means you cannot now click on the link attached to the image.

Can you help me please. I have used the code from the two great threads you have been involved with solving as the base: "Gallery Caption worksarounds for 7.1 - Round 1 & Round 2" (

This is the code as it stands, (excuse my annotations):

body {
  width: 100%;
}
section.gallery-section [class*='-item']:not([class*='-item-']):not([class*='-reel']):not([class*='-slideshow']) {
  position: relative;
}
.gallery-masonry .gallery-item-description {
    visibility: hidden;
}
//TEXT
.gallery-item-description {
  font-family: urw-din-semi-condensed;
  font-size: 20px;
  color: white;
  text-align: center;
}
//OVERLAY?
.gallery-grid,
//.grid covers the simple gallery
.gallery-strips,
.gallery-masonry,
.gallery-reel,
.gallery-fullscreen-slideshow {
  .gallery-item-description {
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.75);
    padding: 25% 0% 0% 0%;
    box-sizing: border-box;
  }
}

.gallery-grid-item 
.gallery-item-description {
    visibility: hidden;
      opacity: 0;
      transition-duration: 0.75s;
}
.gallery-grid-item:hover 
.gallery-item-description {
    visibility: visible;
      opacity: 100;
}
.gallery-grid-item.has-clickthrough:hover {
    opacity: 0.5;
}

.gallery-slideshow, 
.gallery-fullscreen-slideshow, 
.gallery-reel {
  .gallery-item-description {
    padding: 10px 25px;
    opacity: 1;
    transition: opacity 0.2s;
  }
  .gallery-slideshow-item:not([data-in="true"]), .gallery-fullscreen-slideshow-item:not([data-in="true"]), figure[style*="-9999"] {
    .gallery-item-description {
      opacity: 0;
    }
  }
}
.gallery-slideshow {
  .gallery-slideshow-list {
    position: static;
  }
  .gallery-slideshow-item-wrapper, .gallery-item-description {
    flex: 1 1 auto;
  }
}
.gallery-reel {
  .gallery-item-description {
    text-align: center;
    left: 50%;
    transform: translateX(-50%);
  }
  &[data-width="inset"], &[data-width="inset"] {
    .gallery-item-description {
      max-width: 88vw;
    }
  }
  &[data-width="full-bleed"] {
    .gallery-item-description {
      max-width: 100vw;
    }
  }
}
.gallery-lightbox 
.gallery-item-description {
  margin-top: 1em;
  padding: 1em 2em;
  background-color: rgba(225, 225, 225, 1);
  transition: opacity 0.1s ease-out;
}
.gallery-lightbox-item[data-in=false] .gallery-item-description {
  opacity: 0;
}

 

Thanks so much for your help. Oh, this is the version of the footer code you wrote in the previous threads:

<script>
/**
 * Add descriptions/captions to galleries in Squarespace 7.1.
 * JavaScript 
 * © @brandon (Squarespace Forum User)
 * This software is provided "as is", without warranty of any kind, express or implied.
 */
document.addEventListener("DOMContentLoaded", function() {
  addGalleryItemDescriptions();
	
  function addGalleryItemDescriptions(gs, gdzs) {
    var a=['querySelectorAll','section.gallery-section,\x20.gallery-lightbox','length','[class*=\x27-item\x27]:not([class*=\x27item-\x27])','getElementsByTagName','img','alt','trim','createElement','div','className','gallery-item-description','textContent','appendChild'];var b=function(c,d){c=c-0x0;var e=a[c];return e;};(function(c,d){var e,f,g,h,i,j,k;e=document[b('0x0')](c?c:b('0x1'));i=e[b('0x2')];while(i--){f=e[i][b('0x0')](d?d:b('0x3'));j=f[b('0x2')];while(j--){g=f[j][b('0x4')](b('0x5'))[0x0][b('0x6')][b('0x7')]();if(g){h=document[b('0x8')](b('0x9'));h[b('0xa')]=b('0xb');h[b('0xc')]=g;f[j][b('0xd')](h);}}}}(gs,gdzs));
  }
});
</script>

Share this post


Link to post

5 answers to this question

Recommended Posts

  • 0

Hi, I had to turn it off so I could get the site working - I had to show it to someone and needed the site UX to work.

I will comment the code back in. Thanks so much for checking, I know how busy you are.

Share this post


Link to post
  • 0

I went through all your rpevious posts regarding 7.1 gallery fixes, and I found the bit of code - it was there all along:

.gallery-item-description {
  pointer-events: none;
}

It has fixed the problem. Thank you so so much for all the wonderful work you do on here Tuanphan.

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...