Jump to content

Custom CSS on Hovering Images Not Working

Recommended Posts

Site URL: https://www.averyyoungphotography.com

I am currently using the following code and it is working on some of my images but not on the new ones I just posted on my page. I just need help figuring out why this code is not working for those images and how to fix it. 

Thanks!

figure.gallery-masonry-item {
    position: relative;
}
.gallery-caption {
    position: static;
}
/* title */
.gallery-caption-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    transition: opacity ease 200ms !important;
    opacity: 0 !important;
    pointer-events: none;
    height: 10% !important;
}
.gallery-masonry-item:hover .gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
.gallery-masonry-item-wrapper a:after {
    background: rgba(0,0,0,1); /* overlay color */
    content: "";
    display: block;
    position: absolute;
    height: 10%; /* overlay height */
    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;
}
.gallery-masonry-item * {
    color: white;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}
p.gallery-caption-content {
    font-family: LTC-Bodoni-160 
      !important;
}

 

Link to comment
  • Replies 5
  • Views 396
  • Created
  • Last Reply

Top Posters In This Topic

1 hour ago, Avery-Stock said:

Site URL: https://www.averyyoungphotography.com

I am currently using the following code and it is working on some of my images but not on the new ones I just posted on my page. I just need help figuring out why this code is not working for those images and how to fix it. 

Thanks!

figure.gallery-masonry-item {
    position: relative;
}
.gallery-caption {
    position: static;
}
/* title */
.gallery-caption-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    transition: opacity ease 200ms !important;
    opacity: 0 !important;
    pointer-events: none;
    height: 10% !important;
}
.gallery-masonry-item:hover .gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
.gallery-masonry-item-wrapper a:after {
    background: rgba(0,0,0,1); /* overlay color */
    content: "";
    display: block;
    position: absolute;
    height: 10%; /* overlay height */
    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;
}
.gallery-masonry-item * {
    color: white;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}
p.gallery-caption-content {
    font-family: LTC-Bodoni-160 
      !important;
}

 

Do you mean the following images?

image.thumb.png.950ef1c4656a1aa16752da3e7dd0806b.png

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

I changed the word 'masonry' to grid in the CSS below but it did not work. 

.gallery-caption {
    position: static;
}
/* title */
.gallery-caption-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    transition: opacity ease 200ms !important;
    opacity: 0 !important;
    pointer-events: none;
    height: 10% !important;
}
.gallery-masonry-item:hover .gallery-caption-content { 
p.gallery-caption-content {
    font-family: LTC-Bodoni-160 
      !important;
}

 

Link to comment
On 11/7/2021 at 10:28 AM, Avery-Stock said:

I changed the word 'masonry' to grid in the CSS below but it did not work. 

.gallery-caption {
    position: static;
}
/* title */
.gallery-caption-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    transition: opacity ease 200ms !important;
    opacity: 0 !important;
    pointer-events: none;
    height: 10% !important;
}
.gallery-masonry-item:hover .gallery-caption-content { 
p.gallery-caption-content {
    font-family: LTC-Bodoni-160 
      !important;
}

 

Hi,

It looks like you are using some gallery sections on the page. Which gallery are you referring to?

https://www.averyyoungphotography.com/

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!)

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

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.