I am currently working on a personal project that involves creating images with hover transitions. The transition effect works perfectly on all browsers except for iPads. I'm facing an issue where I can't click on the image due to the presence of text overlapping it. I'm not sure why this is happening, but I have two examples to illustrate the problem:
Example 1:
If you try clicking on the image in this example on an iPad, nothing happens because the text is centered using vertical align and text-align properties.
Example 2
In this example, you can click on the right side of the image on an iPad as there is no text covering that area.
CSS
div.hover-img-vertical-smallborder{
margin-top: 25px;
height: 400px;
width: 228px;
float: left;
display: block;
margin-left: 10px;
}
<!-- Rest of the CSS code remains the same -->
<p><strong>HTML</strong><br/></p>
<pre><code><div class="hover-img-vertical-smallborder">
<section class="bg-black"> <!-- bg-black is a black background on hover normal is grey -->
<img src="img/img_5.jpg" style="left: -50%;"/>
<div class="text">
<span>
<h1>This is a title</h1>
</span>
</div>
</section>
</div>
I would appreciate any help or insights into resolving this issue. Thank you.