Why does my Image Overlay not work on iPhone and iPad? - html

Question

Image hover overlay is working on all other platforms that I have tested (desktop, android, etc.) but it doesn't seem to work on iPhone. Can anyone point me in the right direction, please? I'm not sure if it is to do with the z-index or whether it might need web-kits?
When you hover or click on .service it should show the overlay text. Please see below the code:
.service {
position: relative;
width: 80%;
height: 200px;
margin: 60px 10%;
box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
transition: all 0.3s;
}
.main-img-title {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 2.5em;
font-weight: 700;
color: #f8f9fa;
opacity: 1;
transition: 0.5s;
}
.img-title {
background-color: rgba(0, 0, 0, 0.7);
padding: 2px 10px;
font-size: 1.1em;
}
.img-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 0 1%;
background: rgba(0, 0, 0, 0.7);
color: #f8f9fa;
display: flex;
flex-direction: wrap;
justify-content: center;
align-items: flex-end;
text-align: center;
opacity: 0;
}
.service:hover .main-img-title .img-title {
animation-name: title-slide-up;
animation-duration: 0.3s;
animation-fill-mode: forwards;
z-index: 50;
background-color: rgba(0, 0, 0, 0);
}
.service:hover .img-overlay {
opacity: 1;
}
#service-event:hover .main-img-title .img-title {
animation-name: title-slide-up-low;
animation-duration: 0.3s;
animation-fill-mode: forwards;
}
.overlay-img-description {
font-size: 18px;
height: 70%;
display: flex;
justify-content: center;
align-items: center;
margin: 0;
padding: 0 1%;
width: 100%;
max-height: 200px;
}
.overlay-img-description ul {
padding: 0;
}
.overlay-img-description li {
display: inline-block;
font-size: 20px;
}
.overlay-img-description li+li::before {
content: "";
display: inline-block;
vertical-align: middle;
margin: 0 13px;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: currentColor;
}
.overlay-img-description p {
margin: 10px 0 0 0;
font-size: 0.9em;
}
#keyframes title-slide-up-low {
from {
transform: translateY(0)
}
to {
transform: translateY(-45px)
}
}
<div id="service-event" class="service">
<img class="bg-img" src="Images/Steel .JPG" alt="Steel" id="steel">
<div class="main-img-title">
<div class="img-title" id="steel-title">STEEL</div>
</div>
<div class="img-overlay">
<p class="overlay-img-description" id="steel-desc">Our steel crews are experienced with the construction of system scaffolding, black steel tower and truss structures. We specialise in supplying steel climbing teams with the support of steelhand ground labourers as well as plant operators who are
familiar with the requirements of truss and steel assembly.</p>
</div>
</div>

Answer 1

add z-index for img-title and img-overlay, define higher value for img-overlay that will fixed your issue.

Answer 2

The pseudo-class :hover is not supported on mobile devices.
See this question for an alternative to :hover
If you use :active selector in combination with :hover you can achieve this according to w3schools as long as the :active selector is called after the :hover selector.
.info-slide:hover, .info-slide:active{
height:300px;
}
EDIT:
Because :active doesn't work in safari, an alternative is adding an onclick="function()" to the uppermost element. function() should create the desired changes on the webpage. The downside to this solution is the mobile user has to click the element again to close it, instead of it automatically closing.