0

I`ve build a Website with a portfolio.

My problem is the hover-effect on a mobile phone (for example on my iPhone).

On the index.php i build an rotating card and this is working fine on mobile when clicking.

For the portfolio i`m using the following code:

.tile:hover .overlay {
  opacity: 1;
}

.tile:hover p {
  top: 75%;
}

.tile:hover a {
  top: 90%;
}

.tile:hover h2 {
  bottom: 60%;
}
<div class="container section">
  <div class="row">
    <h1>Projekt</h1>
    <div class="col-sm-6">
      <div class="tile tile_effect">
        <img src="images/background.jpeg">
        <div class="overlay">
          <h2>ILakeIt</h2>
          <p>Webdesign | Test | Test | Test Webdesign | Test | Test | Test Webdesign | Test | Test | Test</p>
          <a href="http://www.google.de">To Projekt</a>
        </div>
      </div>
    </div>
  </div>
</div>

I already tried to user :focus and :active but still get no hover-effect on my phone.

I can`t understand why it works on the index.html with :hover but on the other page not. Is there any solution to prevent this error?

Andrzej Ziółek
  • 2,241
  • 1
  • 13
  • 21
  • How do you even hover on an touch-screen device? – Ivanka Todorova Jul 31 '17 at 14:33
  • You can't have hover effects on mobile devices. Or, rather, you can, but you physically cannot hover over the element. Instead, the hover effect is translated into a tap when using mobile/touchscreen devices. – Filip Vuskovic Aug 03 '18 at 09:19

1 Answers1

0

There is no such thing as hover on mobile devices as you know it on other devices. People have had success with workarounds such as this though Fix CSS hover on iPhone/iPad/iPod

Travis Acton
  • 4,292
  • 2
  • 18
  • 30