I have created a grid of images with a unique effect where a semi-transparent overlay appears when you hover over them, revealing some text.
I wanted to achieve the same effect on mobile devices by making the overlay fade in when tapped instead of hovered over.
I was able to get it working on Android devices, but unfortunately, I'm facing difficulties getting it to work on iOS devices.
I will share my code and some attempted solutions that I have experimented with. Despite being new to JavaScript, I do have some basic knowledge implemented on my website already. However, none of the solutions seem to be effective on iOS devices.
Here is the JsFiddle link to my code:
https://jsfiddle.net/49h450g9/
In building this grid, I utilized Bootstrap and LESS. Here is a snippet of my HTML code:
YOUR UNIQUELY REWRITTEN CONTENT HERE...CSS Styling:
YOUR UNIQUELY REWRITTEN CONTENT HERE...Solutions I have attempted so far:
Adding
onclick=""
To the image-wrap div element
2 adding the following line to my JS file:
$('body').bind('touchstart', function() {});- Integrating the below JS snippet into my script:
$(document).ready(function(){
$(".overlay").hover(function(){
//On Hover - Works on ios
$("p").hide();
}, function(){
//Hover Off - Hover off doesn't seem to work on iOS
$("p").show();
})
});
Despite all these efforts, the functionality does not work as intended on iOS devices. When tapping on the images, neither the text nor the semi-transparent overlay fades in.
This has been a challenging task for me, and after several days of troubleshooting and research, no solution seems to address the issue effectively.
If anyone could offer guidance or assistance, I would greatly appreciate it!
Thank you for your time and support.