CSS transparent colour overlay fade not working on iOS

Question

I have made a grid of images and when you hover over them a semi-transparent overlay fades in and out and some text appears

I wanted this to work similarly on mobile devices, only instead of it fading in when you hover, it fades in when you tap

I have managed to get this working on android but not on mobiles.

I will show my code and a few examples of solutions I have tried. I have tried so many but I am rather new to javascript (I have some functioning javascript working on my site though!) and nothing is working on iOS devices.

Js fiddle:

https://jsfiddle.net/49h450g9/

I am using bootstrap and less. My grid HTML code:

<div class="col-sm-5 col-xs-5"><div class="image-wrap">

<img src="assets/images/image1.jpg">
<div class="overlay purple2">
<br>
    <h3>image 1</h3>
    <hr>
      <p>description</p>
      <br>
      <a href="#" class="btn btn-white btn-lg">View Website</a>
    </div>
</div>
</div>
<div class="col-sm-3 col-xs-3"><div class="image-wrap">
<img src="assets/images/image2.jpg">

    <div class="overlay blue">
    <h3>image 2</h3>
    <hr>
      <p>description</p>
      <br>
      <a href="#" class="btn btn-white btn-lg">View Website</a>
    </div>

</div>
</div>
<div class="col-sm-4 col-xs-4"><div class="image-wrap">
<img src="assets/images/image4.jpg">
<div class="overlay purple1">
    <h3>image 3</h3>
    <hr>
      <p>description</p>
      <br>
      <a href="#" class="btn btn-white btn-lg">View Website</a>
    </div>

</div>  
</div>
</div>
</div>
<div class="container-fluid">
<div class="row"> 
<div class="col-sm-7 col-xs-7"><div class="image-wrap">
<img src="assets/images/image5.jpg">
<div class="overlay blue">
    <h3>image 5</h3>
    <hr>
      <p><strong>description</p>
      <br>
      <a href="#" class="btn btn-white btn-lg">View Website</a>
    </div>

</div>
</div>
<div class="col-sm-5 col-xs-5"><div class="image-wrap">
<img src="assets/images/image6.jpg">
<div class="overlay purple2">
    <h3>Image 6</h3>
    <hr>
      <p>description</p>
      <br>
      <a href="about-us.php" class="btn btn-white btn-lg">View Website</a>
    </div>
    </a>
</div>

    </div>
   </div>
</div>

CSS:

.image-wrap {
display: inline-block;
position: relative;  
}
.overlay {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
color:white;
opacity: 0;
transition:opacity .5s ease-out;
text-align: center;
hr {
border: 1px solid #fff;
width: 10%;
 }

}

.image-wrap:hover .overlay {
opacity: 1;
}

.red {
background: rgba(102,67,154,0.7);
}

.blue {
background: rgba(23,56,179,0.7);
}
.purple1 {
background: rgba(140,23,179,0.7);
}

.purple2 {
background: rgba(71,13,142,0.7);
}

Solutions I have tried include:

1. adding

   onclick=""

to the image wrap div element

2 adding the JS line to my js file:

$('body').bind('touchstart', function() {});

3. Adding the following js to my js file:

2 adding the JS line to my js file:

$(document).ready(function(){

$(".overlay").hover(function(){
//On Hover - Works on ios
$("p").hide();
}, function(){
//Hover Off - Hover off doesn't seem to work on iOS
$("p").show();
})
});

However, on iOS none of my solutions are working, when I tap no text or semi-transparent overlay fades in

I have been working on this for nearly a week and have looked at many questions on here but I cannot find a solution that works for me

Any help would be massively appreciated :)

Thanks!

Answer 1

use :active pseudo class instead of :hover . In touch mobile devices, once an hover is triggered, it will not get removed once you take your finger off. It need you to tap on somewhere else on the screen.

similarly in jquery you can use mousedown() and mouseup() for the same purpose. on mousedown() you may show the overlay and mouseup() you may hide it.