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

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>

It’s working for me on an IPad IOS 14 where you do a hover by touch on the word STEEL for example. — A Haworth, Apr 26 '21 at 09:09

score 0 · Answer 1 · answered Apr 26 '21 at 08:47

0

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

answered Apr 26 '21 at 08:47

Jaydeep Chauhan

122
2
9

The issue I have then is that the title is behind the description which is not what I want, I need the title to rise up and the description to be underneath it. – PomTom1212 Apr 26 '21 at 11:38

Sour_Tooth · Answer 2 · 2021-04-26T20:04:38.593

0

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.

edited Apr 26 '21 at 20:04

answered Apr 26 '21 at 08:51

Sour_Tooth

125
9

Thanks for this. I actually kicked myself because I had forgotten :active but when I included it, it still didn't work on Safari. – PomTom1212 Apr 26 '21 at 18:07
[Try see this question.](https://stackoverflow.com/questions/3885018/active-pseudo-class-doesnt-work-in-mobile-safari) `:active` doesn't work on mobile safari, apparently. An `onclick="function()"` on your `service-event` would probably also do the trick (where `function()` makes the desired changes). Although, using the onclick() event would mean the mobile user has to click the element again to close it – Sour_Tooth Apr 26 '21 at 20:00
I added onclick="" to the div and it seemed to do the trick! – PomTom1212 Apr 26 '21 at 20:03

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

2 Answers2