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

7.1 Masonry blog item summary titles as on hover captions


mferrini

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

 

Link to post
  • Answers 3
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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

3 answers 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 detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post
  • 0

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

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