0

I have a wordpress site which i am helping a friend out with

https://capturingscotland.com/galleries

When hovering over the gallery images it shows a transparent red image with a more button. It works fine in chrome, IE, Firefox but when i have tried it on iphones and Ipads with safari it dosent seem to work. Below is the CSS classes used. porto-item is the gallery item

.porto .porto-item:hover img {
  -webkit-transform: scale(1.2);
      -ms-transform: scale(1.2);
          transform: scale(1.2);
  opacity: .2;
}
.porto .porto-item:hover .porto-info {
  opacity: 1;
  box-sizing: border-box;
  height: 100%;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
}
.porto .porto-item:hover .title {
  opacity: 1;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
  text-shadow: 0 0 0 white;
}
.porto .porto-item:hover .categories {
  opacity: 1;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
  text-shadow: 0 0 0 white;
}
.porto .porto-item:hover .more {
  opacity: 1;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
  text-shadow: 0 0 0 white;
}

I have tried adding cursor pointer to all dom elements that are hovered and this does not make a difference. The link above demonstrates he issue

Graeme Baillie
  • 31
  • 3
  • 1
    Possible duplicate of [Does css hover work on mobile devices?](https://stackoverflow.com/questions/2427447/does-css-hover-work-on-mobile-devices) – A. W. Sep 08 '17 at 20:07
  • 1
    what exactly are you hovering with on an iphone or ipad? – Robert Wade Sep 08 '17 at 20:15
  • By hover on a touch device I mean clicking your finger on the div. As I said it works as expected on Android and windows touch devices but not iPhone or ipad. Please see the link in the description for the example. Also just to add on iPhone and ipad if you click the dead centre of the div it kinda half works in that there is a link.in the middle which can be clicked – Graeme Baillie Sep 08 '17 at 20:43
  • iOS devices are notoriously bad with `hover` (and even `click`) events. They use `touch` events instead. In some cases, adding `cursor:pointer` to the element seems to help, for some reason. – Tijmen Sep 08 '17 at 21:03
  • Tried the cursor pointer trick and it didn't make any difference. Any other approach I can try to get the desired output? – Graeme Baillie Sep 08 '17 at 21:19

0 Answers0