Blog page image hover with title

Site URL: https://crane-burgundy-rnlt.squarespace.com/allmusic

Hi guys,

Trying to get it so that the blog images in this grid show the page titles on hover...

https://crane-burgundy-rnlt.squarespace.com/allmusic

password- test

You can view the feature i'm trying to replicate on the homepage under the 'FEATURED ARTISTS' section here... https://crane-burgundy-rnlt.squarespace.com/ . I managed to get it to work on the summary blocks but not on the actual main blog pages.

Thanks!

R

@tuanphan

Any chance you'd be able to have a quick look at this one? Would be hugely appreciated!

I don't see title. Can you add title first?

@tuanphan

Try this page instead...

https://crane-burgundy-rnlt.squarespace.com/allartists

@tuanphan Any thoughts on this or is it not possible?

Yes. You can. I did similar, 3 questions, for gallery title yesterday

I will check tomorrow

@tuanphan Hey! don't suppose you managed to take a look?

Thanks again

Add to Page Settings > Advanced >Header

<style>
  .blog-basic-grid--text {
    opacity: 0;
}
  .blog-item:hover .blog-basic-grid--text {
    opacity: 1;
}
</style>

@tuanphan Thanks! I'll give that a try!

@tuanphan Ok i tried it and its not working yet, you can see what its done here...

https://crane-burgundy-rnlt.squarespace.com/allartists

password- test

Any ideas?

@tuanphan Any thoughts on why this isn't working or it just not possible? Thanks!

I see it worked here? Try clearing your browser cache.

@tuanphan Trying clearing cache but the text for me is showing below the image rather than on top of it?

Your question: "Trying to get it so that the blog images in this grid show the page titles on hover..." or ???

img.summary-thumbnail-

image.loaded:hover {
 opacity: 0.5;
 }

@tuanphan You're totally right! I meant to say so they appear over the image on hover, ideally with a dark  overlay and a transitional fade of some sort.

Like they do on the homepage here under 'FEATURED ARTISTS'...

https://crane-burgundy-rnlt.squarespace.com/

Sorry for the confusion, any idea how to achieve this?

Thanks!

@tuanphan Let me know if you're not able to help here and i'll move on. Thanks!

17 hours ago, robinhouse said:

@tuanphan Let me know if you're not able to help here and i'll move on. Thanks!

 

This is possible.

Can you remove above code/I will check again?

@tuanphan Ok i've just removed the code! Let me know, thanks!

Add to Home > Design > Custom CSS

.blog-basic-grid--text {
    position: absolute;
    width: 100% !important;
    z-index: 999;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
    opacity: 0;
    background: transparent !important;
}
.blog-basic-grid--text * {
    color: white !important;
}
.blog-item a:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0,0,0,0.5);
    transition: all 0.25s;
    opacity: 0;
}
article.blog-item:hover a:after {
    opacity: 1;
}
article.blog-item:hover .blog-basic-grid--text {
    opacity: 1;
}

@tuanphan Ok so thats worked... almost. Its created a black bar where the text is too... is there a way to get rid of the black text bars and have the white text sit on top of the grey filter so it stands out?

https://crane-burgundy-rnlt.squarespace.com/allartists

I basically want it to behave exactly like it does in the 'FEATURED ARTISTS' section of this page...

https://crane-burgundy-rnlt.squarespace.com/

Thanks!

R

@tuanphan Any thoughts? Thanks!

@tuanphan Gonna give you one last poke on this incase you have time to look? Thanks

6 minutes ago, robinhouse said:

@tuanphan Gonna give you one last poke on this incase you have time to look? Thanks

Find this code in above code

.blog-item a:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0,0,0,.5);
    transition: all .4s;
    opacity: 0;
}

edit to

.blog-item .image-wrapper:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0,0,0,.5);
    transition: all .4s;
    opacity: 0;
}

@tuanphan Thanks thats done it!