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

7.1 Masonry blog item summary titles as on hover captions

Question

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

 

Share this post


Link to post

1 answer to this question

Recommended Posts

  • 0

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;
}

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

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