Need help making text overlay on blog post images on hover

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