7.1 Masonry blog item summary titles as on hover captions

Site URL: https://deedsgetoutandvote.squarespace.com/art

Hi Circle folks,

Does anyone know why my attempt to replicate the on hover caption style for masonry galleries as on the homepage of this site: https://deedsgetoutandvote.squarespace.com/ Pwd: PACDeeds on this page: https://deedsgetoutandvote.squarespace.com/art isn't quite working?

Here's the CSS which is basically just a clone of what I used for the gallery captions:

// Gallery: Masonry block captions on hover
.blog-masonry .blog-item-summary {
    position: absolute !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
    opacity: 0;
    transition: all .3s ease;
    height: 100%;
}


.blog-masonry .masonry-ready .entry.is-loaded:hover .blog-masonry .blog-item-summary {
  	cursor: pointer;
    opacity: 1;
    transition: all .3s ease;
}

.blog-masonry .masonry-ready .entry.is-loaded:hover img {opacity: .4;}

.blog-masonry .blog-item-summary {
    display: flex;
    place-items: center;
    justify-content: center;
}

.blog-title {background-color: rgba(255,255,255,.8);}

I'm using the entire .blog-item-summary in case I decide to show meta info as well, but for now I just want the titles to appear on hover as on the homepage gallery. In the Chrome inspector it looks like the .blog-item-summary is appearing where it's supposed to, however it and the blog-title are not visible. I suspect it's the order or some other aspect of flex I'm missing.

Any help would be greatly appreciated,

Thanks!

Martin

edit this

.blog-masonry .masonry-ready .entry.is-loaded:hover .blog-masonry .blog-item-summary {
  	cursor: pointer;
    opacity: 1;
    transition: all .3s ease;
}

to

.blog-masonry .masonry-ready .entry.is-loaded:hover .blog-item-summary {
  	cursor: pointer;
    opacity: 1;
    transition: all .3s ease;
}

Thank you so much! i was looking for this. Is it also possible to add the Read more link? and is there a way to customize the button text? Thanks in advance

16 hours ago, Dian_D said:

Thank you so much! i was looking for this. Is it also possible to add the Read more link? and is there a way to customize the button text? Thanks in advance

Can you share site url? We can check easier.