Turn the flipcard hover effect into an onclick action

After successfully creating interactive flip cards using CSS hover effects, I am now faced with the challenge of adapting them for mobile devices.

I'm struggling to figure out how to translate my hover effects into onclick events for a mobile-friendly version.

You can view my current flip cards at www.anorris.co.uk/flip

If anyone has any advice or guidance on this topic, it would be greatly appreciated.

Feel free to let me know if you'd like me to share my code here for better context.

Thank you!

jqueryhtmlcss

Answer №1

To achieve this effect, you can utilize the :active selector along with the :hover selector. Make sure to call the :active selector after the :hover selector.

Here is an example:

.stuff1:hover, .stuff1:active {
    -webkit-transition-delay: 0.25s;
    transform: rotateY(180deg);
}

If you prefer to use JQuery, you can change the CSS of your :hover to a class like .active and then add JQuery to toggle this class upon clicking:

$('.x').on('click', function(){
    $(this).toggleClass('active');
});

If you need further assistance, feel free to share your code on jsfiddle for additional help. This should point you in the right direction to get started.

Check out the Fiddle Demo

Answer №2

Check out this great resource: http://davidwalsh.name/css-flip I found it to be very helpful!

To create a click event, simply apply these CSS styles to your div:

transform: rotateY(180deg);

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

A completely css-based interpretation of google images

I am in the process of trying to recreate the layout found in Google Photos and stumbled upon this intriguing page https://github.com/xieranmaya/blog/issues/6 . I am particularly interested in the final result of the project, which can be viewed here: . U ...

htmlcssflexbox

Tips on effectively centering a wide div

After much experimentation, this is what I came up with: (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en ...

javascriptjqueryhtmlcss

Selenium Assistance: I'm encountering a scenario where on a webpage, two elements share the same Xpath, making it difficult to differentiate them based on even

At index [1], both elements are identified, but at index [2], nothing is identified. The key difference between the two is that one has display:none, and the other has display:block. However, their involvement in determining these fields is minimal due to ...

javascripthtmlseleniumxpath

Angular Igx-calendar User Interface Component

I need assistance with implementing a form that includes a calendar for users to select specific dates. Below is the code snippet: Here is the HTML component file (about.component.html): <form [formGroup]="angForm" class="form-element"> <d ...

javascriptangularhtmltypescriptbootstrap-4

Using a Do/While loop in combination with the setTimeout function to create an infinite loop

Having trouble with this script. The opacity transition works fine, but there seems to be an issue with the loop causing it to run indefinitely. My goal is to change the z-index once the opacity reaches 0. HTML <div class="ribbon_services_body" id="ri ...

javascriptcssdo-while

Why won't the code for detecting the DEL key in a textarea work on my computer?

I've been trying to detect when a user presses the Delete key and came across this helpful tutorial here The code worked flawlessly on jsfiddle.net, you can check it out here- http://jsfiddle.net. However, when I copied the same code to my local comp ...

javascriptjquery

Issue with window.location.href and unexpected behavior in Firefox 7

I can't seem to figure out the issue I'm encountering on FF7 My ajax calls are returning a json object (jquery). if(data.result=='ok') { var url = baseURL + "azioni/makeForm/" + data.actcode + "/DIA/" + data.az_id; console.log ...

javascriptjqueryajaxjson

Comparing two tables in jQuery/Javascript for matching data

I want to check for matches between the rows of two HTML tables, where the data in the first cell can be duplicated but the data in the second cell is always unique. The goal is to determine if the combination of values in the first and second cells of tab ...

javascriptjquery

Tips for positioning a label within the span element wpcf7-form-control-wrap

Is it possible to place the label for input elements inside the span element generated by the cf7 shortcode? I want to achieve this in order to make the label only visible when the input field is in focus. To accomplish this, both the label and the input ...

jqueryhtmlcsswordpresscontact-form-7

Display values in real-time when the text box is modified

Is there a way to update the total value in a text box based on user input using JavaScript and PHP, or just JavaScript? For example, if item "A" costs $25 and the customer orders 5 of "A", the total should automatically display as $125 when the quantity ...

phpjqueryajax

Gather information that is dynamic upon the selection of a "li" option using Python Selenium

I need to extract data from this website (disregard the Hebrew text). To begin, I must choose one of the options from the initial dropdown menu below: https://i.stack.imgur.com/qvIyN.png Next, click the designated button: https://i.stack.imgur.com/THb ...

pythonhtmlseleniumweb-scrapingscreen-scraping

A step-by-step guide to effectively removing special characters generated by an array while populating the name field of an email in PHP

I have developed a custom email application and I want to implement a filter that removes special characters (e.g. !@£$%^) when a user submits the form. Here's my current implementation: <?php $name = $_POST['name']; $to = "<a ...

phphtml

Connecting a string array to the navigation bar

Need Assistance with AngularJS: In my controller, I have a string array that looks like this: var app = angular.module('myApp', []); app.controller('mycontroller', function($scope) { $scope.menuitems =['Home','About&apos ...

javascriptcssangularjshtmlasp.net-web-api

Direct your attention to the <tr> tag located within a scrollable <div>

var newrow = $( "<tr id=" + mahs + ">" + "<td id=\"stt\">" + $("#txtIncrement").val() + "</td>" + "<td id=\"mahs\">" + mahs + "</td>" + "<td id=\"fullname\">" + $("#txt ...

jqueryscroll

What is the best way to create a percentage glyphicon star icon that reflects a decimal average rating?

I have an average rating of 4.3 and I need to create a logic to display this as 4.3 stars (4 whole stars and the 5th star partially filled). The maximum rating is out of 5. Despite referring to examples on Stack Overflow and creating a JSFiddle, I am unabl ...

javascriptangularjshtmltwitter-bootstrap-3woff

What causes inline-blocks to malfunction after a non-breaking space is inserted?

Here is some HTML code: <p id='one'>Hello World how are you.&nbsp;<span>Entrepreneur</span></p> <p>Hello World how are you.&nbsp;<span>Entrepreneur</span></p> Below is some CSS styling: ...

css

Leveraging jQuery.ajax() for retrieving c# WebMethod data triggers the error message of 'Unidentified Web Method'

I am diving into the world of jQuery.ajax() for the first time to call a WebMethod. Despite my efforts searching on stackoverflow and Google countless times, I seem to be stuck in a cycle of trial and error with random solutions. It's reached a point ...

c#javascriptjqueryajax

Generating a fresh row while utilizing ng-repeat in AngularJS

I have implemented a basic ng-repeat function to create a list of countries along with their relevant data. Each entry in the list contains a hidden row that can be expanded or collapsed. I am facing an issue where I cannot get the hidden row to display c ...

htmlangularjsangularjs-directivehtml-tableangularjs-ng-repeat

Photo not completing the table

Hey there, I'm currently working on creating a table to showcase some products but I am struggling with ensuring that the images display at the correct size. Any assistance on this matter would be greatly appreciated. #tbldesktops { width: 100%; ...

htmlcss

Is there a way to retrieve the ID by using the autocomplete feature to search for a user's first name and last name in PHP

Check out this code from index.php (all credit to the original owner): <HTML> <HEAD> <TITLE> Ajax php Auto Suggest </TITLE> <link href="css/style.css" rel="stylesheet" type="text/css"> <SCRIPT LANGUAGE="JavaScript ...

phpjquerycssajaxweb