Jump to content

Gallery - Links not working

Go to solution Solved by tuanphan,

Recommended Posts

  • Replies 8
  • Views 461
  • Created
  • Last Reply

Top Posters In This Topic

Posted

The css related to the gallery, of course removing now.

Let me know if you need anything else or for me to remove anything else!

Thanks so much!

Posted

I would like for each image to have the description displayed on top and centred in white font, and the image should be clickable. On hover I would like for a yellow overlay to appear on top of it whilst the name remains and the whole image is still clickable.

 

Thanks again!

  • Solution
Posted
21 hours ago, CloudX said:

Yes, exactly that! Thanks!!

Add to Design > Custom CSS

/* Masonry hover 2 */
figure.gallery-grid-item {
    position: relative;
}
.gallery-caption, .gallery-caption-wrapper {
    position: static !important;
    z-index: 100 !important;
    top: unset;
    transform: unset;
    height: initial;
    opacity: 1 !important;
}
/* title */
.gallery-caption-content {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    padding: 7%;
    transition: opacity ease 200ms !important;
    opacity: 1 !important;
pointer-events: none;
    color: white;
}
.gallery-masonry-item:hover .gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
.gallery-masonry-item-wrapper a:after {
    background: rgba(244,211,76,1); /* overlay color */
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}
.gallery-masonry-item:hover .gallery-masonry-item-wrapper a:after {
    opacity: 0.75;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.