Htykuut

I have created a list ul and in each element I have placed images, the fact is that when I hover over these images in desktop, 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 put 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 two clicks on the image so you can show this layer with information.

I have this code in javascript so that on mobile devices when I touch on each image it will show me the information:

$(".item").on('click touchend', function(e) {



    var mediaquery = window.matchMedia("(max-width: 767px)");



    if (mediaquery.matches) 

    {

        // mediaquery yes

        $(".menu-desc").css("left", "0px");

    } 

    else 

    {

        // mediaquery no

    }



});//click event

this could work for what I need the problem is that when it detects the click in one of the boxes, the information appears in all the boxes at the same time, which is not the desired thing, if the touched is made in one of the boxes only in that box the information should appear. I can not refer to the boxes by means of an id since I have no control of how many boxes are created, since these boxes are being added by means of a content management panel that I created. There may be as many boxes as the user wants, so I do not know how to do it so that I can detect exactly each box individually.

How could I achieve this? The idea is to replace hover, in mobile version.

HTML code:

<ul id="menu-pricing" class="menu-price">

<?php 

for ($j=0; $j <count($categories); $j++) 

{ 

?>

    <li class="item <?php echo $categories[$j][1];?>">

        <a href="#">

            <img src="admin/<?php echo $categories[$j][4];?>" class="img-responsive" alt="Referenzen Works" >

            <div class="menu-desc text-center">

                <span>

                    <h3><?php echo $categories[$j][5];?></h3>

                    <?php 

                    if ($categories[$j][6] !== "empty") 

                    {

                    ?>

                        <h4><?php echo $categories[$j][6]; ?></h4>

                    <?php 

                    }

                    ?>

                </span>

            </div>

        </a>

    </li>

<?php 

} //for

?>

</ul>

html without php

<ul id="menu-pricing" class="menu-price">



    <li class="item here-go place-a-class-created-by-the-user-in-Adminpanel">

        <a href="#">

            <img src="admin/public/image.png" class="img-responsive" alt="Referenzen Works" >

            <div class="menu-desc text-center">

                <span>

                    <h3>Title of box</h3>



                    <h4>Subtitle of box (optionl)</h4>

                </span>

            </div>

        </a>

    </li>



</ul>

the information in the boxes comes from the database.

CSS Code:

/** 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;

}  

Try adding :active. Though because of how quick taps are on mobile, having hover effects is quite pointless. I always reserve hover effects for web on PC. Mobile works nicely with :active.

Alternative would be to add a class through javascript that triggers an animation using keyframes, and remove the class after the length of the animation using a timeout.

Example: https://jsfiddle.net/votnd2zy/