Masonry Grid Hover Captions

Hi, all. I asked this last week in a resolved thread and am thinking maybe I need to create a new post ...

I have experimented with various versions of CSS code to implement a hover caption on masonry grids in 7.1. Had best luck with code in this thread, but I have a couple issues -- 

• when I am not hovering over image, I can see a faint/small version of the caption on the image (see screenshot)
• Mobile - I know hover doesn't work on mobile screens. Struggling to figure out  CSS so that always displays caption (beneath image) on mobile. 
   

My testing

For the mobile, you can try the following Css code

@media only screen and (max-width: 767px) {
  .gallery-masonry-item-wrapper {
    height: auto !important;
  }
  .gallery-masonry-wrapper.gallery-masonry-list--ready {
    display: flex;
    flex-wrap: wrap;
    height: auto !important;
  }
  figure.gallery-masonry-item {
    position: relative !important;
    display: flex;
    flex-direction: column;
    width: 100% !important;
    transform: unset !important;
  }
  .gallery-caption-content {
    position: relative;
  }
  .gallery-caption.gallery-caption-grid-masonry {
    width: 100%;
    max-width: unset;
  }
  .gallery-masonry-item-wrapper a:after {
    content: unset;
  }
}

My testing

@Beyondspace you are my hero today!  Both of your suggestions are working. I so appreciate your help! 🎉