Implementing smooth transitions on iPad screens with responsive text

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.

Answer №1

Touch devices do not trigger hover events. To achieve similar functionality in JavaScript, you can use one of the following touch events:

touchstart
touchmove
touchend
touchcancel

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Learn how to hide elements on print pages conditionally in Vue.js using CSS or JavaScript

I am currently using the Vue framework to work on printing webpages for my application. I have an issue that needs a solution, which I will explain below. <template> <div id = "intro" style = "text-align:center;"> <div ...

The PHP file on my local WAMP server seems to be having trouble retrieving inputs from the HTML's GET or POST methods

<!DOCTYPE HTML> <html> <body> <form action="testrun.php" method="GET"> Name: <input type="text" name="name"><br> E-mail: <input type="text" name="email"><br> <input type="submit"> </form> </bo ...

The functionality of Vue is acting up with the HTML, unexpectedly refreshing when a button is clicked

I am currently experiencing an issue with my Vue application. When I click the button, it clears the input field (which it shouldn't) and doesn't perform any other actions. The variables "codigo" and "payload" do not display anything on the scree ...

What is the proper way to align the menu?

I am currently working on a project that involves integrating a menu (with the background only visible on the left side) and an article template together. The menu can be found here, while the article template is located here. I have tried to combine the ...

Accessing a distinct element of e.parameter

I've implemented a Google App Script on my website that automatically writes form data to a spreadsheet upon submission. With multiple forms on the site, I want all their data to go to the same Spreadsheet but different 'Sheets' (tabs at th ...

Making a dropdown menu spin using Jquery and Javascript

I am in need of a unique solution for a dropdown menu that appears rotated 90 degrees anticlockwise. The goal is to have the dropdown select "button" text displayed vertically, with the options sliding out in a similarly rotated, sideways manner featuring ...

How to send the chosen option value from a select tag in Python Flask

My user registration form features a select tag, and I'm trying to assign the value of the selected option to a variable using the code below: registration.html <form method="POST" action="/register"> <div class="form-group"> ...

Choosing the right framework for implementing push notifications can be a critical decision. Should

I am currently working on a Java application that requires the server to send push notifications to the client every one second. To achieve this, I am using HTML5 server-sent events for one-way communication from the server to the client. However, my conce ...

Vue Labyrinthine Design theme

Looking for some guidance from experienced developers out there! I'm currently exploring how to incorporate Mazeletter as a background feature for each page in an app project I've been working on. This is all new territory for me, so any assista ...

The issue persists with the JavaScript window.location script constantly refreshing

I am currently working on a small web application where I want to update 2 parameters in the URL using Javascript. However, every time I use "window.location.search = 'scene.html?name=' + person + '&scene=' + readCookie("scene");", ...

Unable to horizontally center ul element within Materialize navigation content

Struggling to center nav-content by using the center option Hoping for it to have this appearance. Unfortunately, applying it directly to the ul attribute doesn't yield desired results. Instead, it ends up looking like this. This is the code snipp ...

Dynamic binding of CSS properties in AngularJS is a powerful feature that enables

I am attempting to dynamically bind the css property counter-reset in AngularJS. To see my efforts, check out this Fiddle link. Essentially, I aim to have the numbering of li elements begin with the number specified in the controller. Despite trying to us ...

Is there a way to temporarily toggle classes with jQuery?

Incorporating ZeroClipboard, I have implemented the following code to alter the text and class of my 'copy to clipboard button' by modifying the innerHTML. Upon clicking, this triggers a smooth class transition animation. client.on( "complete", ...

Making an entire webpage background clickable using just HTML and CSS

Is there a way to make the entire background of the page clickable using just HTML and CSS? <div style="position: fixed; top:0px; left:0px; z-index: -1; background: url() center center no-repeat; width: 100%; height:100%;"> <a href='http ...

Populate your HTML with JSON data

I need some guidance on how to achieve a specific task. I have a PHP file that retrieves data from a MySQL database and returns it in JSON format. Now, I want to display this data in HTML with "data_from_json" replaced by "18.5". Any assistance would be gr ...

Tips for maintaining pagination state in datatable when making ajax calls

Summary of my question How can I keep the datatable on the same page after updating a row using ajax in my unique way? Challenges I'm facing When a user clicks a button in the table to update a specific row and I call the fn_GetData() function. Af ...

Older versions of Internet Explorer, specifically IE 8 and below, are causing issues with iframe

I am currently working on a website that includes an embedded Vimeo video. The majority of our target audience uses IE8 or older, and interestingly enough, most of them have their browsers zoomed to 125% view. Unfortunately, while everything else on the si ...

Display a specific element only if another element exceeds a specified height

A snippet of HTML code is given below: <span class="day-number">{{day-number}}</span> <div class="event-box"> <div class="event-container"> </div> <div class="more-events">more ...</div> </div> The .e ...

Implement a callback function to dynamically generate variables and display them within an HTML element

Apologies in advance for any errors I may make as I am a beginner when it comes to javascript, jquery, and json. I have a script that retrieves data from a json file and displays it on a webpage using javascript, jquery, ajax (I believe), and json. When ...

Tips for zooming to the middle of a div element

I'm trying to figure out how to create a zoom in effect on my large div, but I haven't been successful despite searching through many resources. My goal is to zoom into the center of the user's screen rather than just at a set position. ht ...