Jump to content

Need help making text overlay on blog post images on hover

Go to solution Solved by EmilyLewis,

Recommended Posts

Hey, I need help making the blog post title appear when hovering over the image, rather than it being underneath the image. The blog is using the masonry blog layout.

For context, this is the projects page but I made it using the Blog. 

 https://momentumcardiff.squarespace.com/projects

Password: aXWoryOnAloA

Thank you in advance!

     

Emily Lewis

Founder of TwoFold
Squarespace websites for service-based businesses
twofold-studios.com

Link to comment
  • Replies 4
  • Views 1.5k
  • Created
  • Last Reply

Top Posters In This Topic

  • Solution
7 hours ago, tuanphan said:

Hi,

I see you already figured it out?

Hey, yes I played around with it for a few hours. This is what I've managed to do in the end, but let me know if there would have been a more efficient CSS to get the same results. 

 

//Project overlay - desktop only//
@media screen and (min-width: 640px){
//Hover background colour overlay on image//
.blog-image-wrapper {
  background-color: #46363c;
}

.hentry:hover .image-wrapper {
    opacity: 0.5;
}


//Hover text overlay on image//
.blog-item-summary {
opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.hentry:hover .blog-item-summary {
  opacity: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.hentry:hover .blog-title {
color: #FFFFFF;
}


//Hover read more link text and underline change//

.hentry:hover .blog-more-link {
color: #FFFFFF;
}


.hentry:hover .blog-more-link:before { 
border-bottom: 1px solid #ffffff
}
}
 

 

     

Emily Lewis

Founder of TwoFold
Squarespace websites for service-based businesses
twofold-studios.com

Link to comment
  • 2 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.