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;
}
If you want it so that whenever the item is touched the hover appears (like if scrolling) then you can add: cursor: pointer;
to the element you wish the hover to appear on. Without this iOS only styles :hover
events on links.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.