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

Blog page image hover with title


Question

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

 

 

 

Link to post
  • Answers 27
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

img.summary-thumbnail- image.loaded:hover {  opacity: 0.5;  }

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%,-5

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

Recommended Posts

  • 1

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

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I'm seriously sick. Off some time.

Link to post
  • 0

@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

 

 

 

Link to post
  • 1
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;
}

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I'm seriously sick. Off some time.

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