javascript – How to replace the hover effect in mobiles by scroll effect in images

I have created a list ul and in each element I have placed images, the fact is that desktop when I hover over these images, a layer is displayed over the image that I had previously hidden, in that layer information about the image is displayed. When I do not pass the cursor over the image, this layer is hidden again. The problem is that in mobile version the hover effect does not work as in desktop but you have to do one and even two click on the image so you can show this layer with information.

How could I change the Hover effect in these images, in the mobile version? What I want to do in mobile is that when I scroll through those images, that layer with information will appear and disappear.

How could I achieve this? The idea is to replace hover, in mobile version, with some other effect that allows me to achieve something similar.

code of the boxes

            

the information in the boxes comes from the database.

this is the css

                                                        / ** menu-pricing list ** /
                #images_li_options_container
                {
                  margin-left: 0px! important;
                  margin-right: 0px! important;
                  padding-left: 0px! important;
                  padding-right: 0px! important;
                }

                #images_li_options_container .row
                {
                  padding-left: 0px! important;
                  padding-right: 0px! important;
                }

                # menu-pricing {
                  display: block;
                    width: 100%;
                    padding: 50px 0px 25px 0px;
                    margin-bottom: 0;
                  text-align: left;
                }

                # menu-pricing .item {
                  background-color: white;
                  / * box-shadow: 0px 2px 5px white; # 948E8E; * /
                  display: none;
                  / * opacity: 0; * /
                  vertical-align: top;
                  margin-bottom: 0px;
                  margin-right: 0px;
                  color: #fff;
                  text-align: center;
                  width: 33.1%;
                  height: 220px;
                  -moz-box-sizing: border-box;
                }

                # menu-pricing .item a {
                  display: inline-block;
                  max-width: 100%;
                  max-height: 220px;
                  text-decoration: none;
                  background: #fff;
                  text-align: center;

                }

                @media (min-width: 991px) {
                  # menu-pricing .item: nth-child (7),
                  # menu-pricing .item: nth-child (8),
                  # menu-pricing .item: nth-child (9) {
                    margin-bottom: 0px;
                  }
                }

                @media (min-width: 1200px)
                {
                # images_li_options_container.container {
                    width: 100%! important;
                }

                }

                / * - ======================= For Hover Direction =========================================== ========== - * /

                .menu-price li a,
                .menu-price li a img {
                  display: block;
                  position: relative;
                }
                .menu-price li a {
                  overflow: hidden;
                  color: #fff;
                }
                .menu-price li a .menu-desc {
                  position: absolute;
                  font-size: 14px;
                  background: rgba (255, 255, 255, 0.7); / * rgba (29, 136, 197, 0.4); blue * /
                  width: 100%;
                  height: 100%;
                  top: 0px;
                  left: -100%;

                  -webkit-transition: all 0.3s ease;
                  -moz-transition: all 0.3s ease-in-out;
                  -o-transition: all 0.3s ease-in-out;
                  -ms-transition: all 0.3s ease-in-out;
                  transition: all 0.3s ease-in-out;

                }

                .menu-price li a .menu-desc span h3 {
                  font-size: 30px;
                  margin-bottom: 15px;
                }

                .menu-price li a: hover .menu-desc {
                  left: 0px;
                }

                # menu-pricing .item img {
                  max-width: 100%;
                  height: 220px;
                  text-align: center;
                  -webkit-transition: all .2s ease-in-out;
                  -moz-transition: all .2s ease-in-out;
                  -o-transition: all .2s ease-in-out;
                  -ms-transition: all .2s ease-in-out;
                }

                # menu-pricing .item: hover img
                {
                 -webkit-transform: scale (1.8);
                    -moz-transform: scale (1.8);
                    -o-transform: scale (1.8);
                    transform: scale (1.8);
                }

                .menu-price li a: hover .menu-desc span {
                  display: block;
                  / * color: rgba (255,255,255.0.9); * /
                  font-size: 23px;
                  padding: 22% 20px;
                  line-height: 23px;
                  color: black! important;
                  font-weight: bold! important;
                }