I have created a list ul and in each element I have placed images, the case is that desktop when I hover over these images a layer is displayed over the image that I had previously hidden, in that layer it shows information about the image. 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.
I have created this code in javascript so that on mobile devices when clicking a tap type 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
works for what I need the problem is that it detects the click in one of the boxes, the information appears in all the boxes at the same time, which is not what is desired, if the touched is made in one of the boxes only in that the information must appear, and so on. I can not refer to the boxes by means of an id since I do not have control of how many boxes are created, since these boxes are being added by means of a content management panel. 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.
code of the boxes:
<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>
Resulting html
<ul id="menu-pricing" class="menu-price">
<li class="item aqui-va-una-clase-definida-por-el-usuario">
<a href="#">
<img src="admin/public/imagen.png" class="img-responsive" alt="Referenzen Works" >
<div class="menu-desc text-center">
<span>
<h3>Titulo principal de cada box</h3>
<h4>Subtitulo de cada box (este es opcional,el usuario elige si lo quiere poner o no)</h4>
</span>
</div>
</a>
</li>
</ul>
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;
}