Displaying Portfolio Titles as Overlays when Scrolling Down on Mobile

Site URL: https://www.alperkologlu.com/

Hi there,

I'd like my portfolio titles appear over gallery images on mobile as I scroll down.  I have the code below added as custom CSS that kind of does it but unfortunately not in a tidy way. For some reason the portfolio image gets a darker overlay which then goes lighter, instead of staying darker. I was wondering if there is way to remedy this issue. Thank you all in advance for your help. 

@media screen and (max-width:640px) {

.portfolio-text:hover {

  opacity:1 !important;

  background-color: rgba(0, 0, 0, 0.4);  }
}