How to show text before hover on mobile device but not desktop?

Hello. I've seen others ask this but the custom CSS didn't seem to work for my site. On my home page, I want the text to appear after hover, but on mobile I'd like it to appear before. Here's my site that I'm inquiring about. Thanks for any tips or css code to try out!  https://www.daphnedoesdesign.com/

Daphne 

Try this Custom CSS:

@media only screen and (max-width:767px) {
  .tweak-portfolio-grid-overlay-show-text-after-hover .portfolio-grid-overlay .grid-item .portfolio-text {
    opacity: 1 !important;
  }
  .tweak-portfolio-grid-overlay-show-text-after-hover .portfolio-grid-overlay .grid-item .portfolio-overlay {
    opacity: 0.24 !important;
  }
}

Thanks for the speedy reply! That seemed to do the trick. 

4 hours ago, daphnelambert said:

Thanks for the speedy reply! That seemed to do the trick. 

You're welcome! Can you mark my post as the solution to your question?