How to beat :hover on iOS?

Question

css

Good afternoon!
The essence of the issue: on the desktop, when you hover over a post with the mouse, a div appears with the name and description of the post.

On iOS, :hover doesn't work at all. After looking at ways to solve this problem, I settled on hanging on a div click instead of :hover. On click, the css class is simply replaced.
Here is the code:
HTML:

<div class="img_masorny">
  <div class="masorny-post-meta">
    <div class="masorny-post-meta-text">
      <a href="<?php the_permalink(); ?>"><?php the_title('<h2>', '</h2>'); ?></a>
      <?php the_excerpt(); ?>
    </div>
  </div><!--/post-meta-->
<a href="<?php the_permalink(); ?>"><img class="blog_img_masorny" src="<?php echo catch_that_image(); ?>" alt="" /></a>
</div>

JS:

<script type="text/javascript">
        $(function() {
          if (screen.width <= '1024') {
              $(".img_masorny").click(function() {
                $(this).find(".masorny-post-meta").toggleClass("masorny-post-meta-click");
                $(this).find(".masorny-post-meta-text").toggleClass(".masorny-post-meta-text-click");
            }); 
            }
          })
      </script>

CSS:

.masorny-post-meta {
  position: absolute;
  width: 100%;
  height: 100%;
  padding:0 19px;
  font-size: 15px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.44);
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  /* IE 5-7 */
  filter: alpha(opacity=0);
  /* Netscape */
  -moz-opacity: 0;
  /* Safari 1.x */
  -khtml-opacity: 0;
  opacity: 0;
  -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
}

.masorny-post-meta-text {
  position: relative;
  display: block;
  margin-top: -250px;
  
  -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
}

.masorny-post-meta-click {
  opacity: 1;
}
.masorny-post-meta-text-click {
  margin: 0;
}

This method works for me but not quite correctly. Here's what happens if you tap first one post and then another:

So .masorny-post-meta-text goes back, but .masorny-post-meta doesn't go to opacity:0. And I don't know what's wrong.
Please, help.

Answer 1

for the hover block, just write onclick=""

Answer 2

It's generally stupid to try to simulate the hover effect for a touch device. You must redesign the application and for mobile devices immediately (!) display a description. Below is a picture for example.

Answer 3

Use :active to trigger on mobile.
https://jsfiddle.net/QW01_01/3jqr1n40/