Brine - Blog titles on hover of thumbnail image on the blog page?

Site URL: https://www.no-frames.com/blog-brine/

Hi, 

I need help, as I'm now stuck after hours of fiddling. I was able to achieve a darkened image and centered text, but on hover the text is not responding to opacity or visibility changes. I've tried adding "!important" too. (I mainly want to use the blog page design so that I can have the "previous/next" pagination links at the bottom for a portfolio....)

I would appreciate any assistance! Happy New Year!

7.0 Brine. This is my code: 

Quote

@media screen and (min-width:800px){ 
  .BlogList-item {    
      position: relative;
    }   
  .BlogList-item-title {   
    position: absolute;
    top:50%;
    left: 0;
    right: 0;
    text-align: center;
    color: #fff;     
    opacity: 0;
    transition: all 0.3s;
    }    
  
  .BlogList-item:hover {   
      img {filter: brightness(50%);  
    }   
    title {   
      opacity: 1;
    }
  } 
}

12 hours ago, hellomw said:

Site URL: https://www.no-frames.com/blog-brine/

Hi, 

I need help, as I'm now stuck after hours of fiddling. I was able to achieve a darkened image and centered text, but on hover the text is not responding to opacity or visibility changes. I've tried adding "!important" too. (I mainly want to use the blog page design so that I can have the "previous/next" pagination links at the bottom for a portfolio....)

I would appreciate any assistance! Happy New Year!

7.0 Brine. This is my code: 

 

Try in Home > Design > Custom Css

.BlogList-item:hover  .BlogList-item-title {
  opacity: 1;
}

Let me know how it works on your site

Support me by pressing 👍 if this useful for you

My testing

Thanks so much, @bangank36! This worked. I appreciate your help.