Jump to content

adding image description overlay to mosaic grid in 7.1

Recommended Posts

I am on trial mode for 7.1. Current site is 7.0. I want a very specific thing. Which is gallery pages of images of my artwork in mosaic mode where the image description is on overlay on hover for each image and then i can click through to another page for each image where you cna see deatils shots and more info etc. 

I can;t do the overlay feature and it is making me insane

I am an artist.

Link to comment
  • Replies 9
  • Views 804
  • Created
  • Last Reply

I found code in another post but when I add it it doesn't change anything. Maybe I am not adding it n the right place? 7.1 is challenging! This was the code I found elsewhere:

.tweak-portfolio-grid-overlay-show-text-after-hover .portfolio-grid-overlay .grid-item:hover .portfolio-overlay, .tweak-portfolio-grid-overlay-show-text-after-hover .portfolio-grid-overlay .grid-item:hover .portfolio-text {
  opacity: 1 !important;
}

I am an artist.

Link to comment

basically afterI entered this code...the caption just flashes for a sec but when I test the site it isn't visible at all.

figure.gallery-grid-item {
    position: relative;
}
.gallery-caption {
    position: static;
}
/* 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: 0 !important;
pointer-events: none;
}
.gallery-grid-item:hover .gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
.gallery-grid-item-wrapper a:after {
    background: #f4f6ea; /* overlay color */
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}
.gallery-grid-item:hover .gallery-grid-item-wrapper a:after {
    opacity: 0.75;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}

I am an artist.

Link to comment

I got this problem solved by entering code as follows:

figure.gallery-grid-item {
    position: relative;
}
.gallery-caption {
    position: static;
}
/* title */
.gallery-caption-content {
    position: absolute;
    background: rgba(255,255,255,0.5);
    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: 0 !important;
    pointer-events: none;
}
.gallery-grid-item:hover .gallery-caption-content {
    opacity: 1 !important;
}
.gallery-masonry-item:hover .gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
.gallery-grid-item-wrapper a:after {
    background: #f4f6ea; /* overlay color */
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}
.gallery-grid-item:hover .gallery-grid-item-wrapper a:after {
    opacity: 0.75;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}

I am an artist.

Link to comment

Archived

This topic is now archived and is closed to further replies.

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