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

What are some creative ways to customize the background of a MaterialUI modal design?

I am currently facing an issue with my MUI Modal setup. The backdrop is displaying as black even though I have proper styling in place. No matter what I do, the backdrop remains pitch black and does not update. Below is the code snippet along with a scree ...

cssreactjsmaterial-ui

Split a column into two at the md breakpoint with Bootstrap

I am looking to rearrange the cards in a specific order on breakpoint -md. Please refer to the image below for reference. https://i.sstatic.net/UXABN.png The goal is clarified in the image above. I would prefer if this can be achieved using bootstrap and ...

htmlcssbreakpointsbootstrap-5card

Tips for displaying a pop-up when pressing a link:

I've spent a considerable amount of time on this project without making much progress. However, I came across a tutorial with a beautiful menu design that I decided to replicate. Here is the code: HTML: <!DOCTYPE html> <html> <head> ...

htmlcsspopup

Steps for activating and deactivating MVC Required Field validation

Is there a way to toggle the required field validation based on clicking an anchor tag? Here is an example: <div class="row"> <div class="col1"> @Html.DisplayNameFor(m => m.CustomText) </div> <d ...

jqueryasp.net-mvc-3

Guidance on retrieving a boolean value from an asynchronous callback function

I'm looking to determine whether a user is part of a specific group, but I want the boolean value returned in the calling function. I've gone through and debugged the code provided below and everything seems to be working fine. However, since my ...

javascriptjquery

Utilizing jQuery or JavaScript to transfer information within a Bootstrap modal

I am working with a table that is generated from an SQL Table using PHP for data looping. HTML <tbody> <?php $no = 1; foreach($data_request as $data) { ?> <tr> <td class="center"><?php echo $no++.". ";?> ...

javascriptjquerytwitter-bootstrap

Mapping various sets of latitudes and longitudes on Google Maps

I am working with multiple latitude and longitude coordinates. var latlngs = [ {lat:25.774252,lng:-80.190262}, {lat:18.466465,lng:-66.118292}, {lat:32.321384,lng:-64.757370}, {lat:25.774252,lng:-80.190262}, ]; The coordinates were ret ...

javascriptphpjquerygoogle-maps

Is it possible to eliminate jagged edges in CSS 2D rasterization by applying anti-aliasing to subpixels?

It appears that the HTML/CSS engine automatically rounds values to the nearest whole px unit. It would be interesting to see non-discrete sizing options (floats). A closer look reveals that in Chrome, widths/heights are rounded to the nearest physical pix ...

htmlcss

Display an HTML tag with JavaScript

My code is in both HTML and TS files. The content stored in the Description variable looks like this: <div>aaaa</div><div>bbbb</div><div>cccc</div> Currently, the output displays as follows: aaaabbbbcccc I want to modi ...

javascripthtmlangular

Warning on React component listing due to key issue originating from the parent component

Alert: It is essential that each child in a list has a distinct "key" prop. Please review the render method of ForwardRef(ListItem). A child from RecipientsList was passed. I have located this issue using the react-components debugger tool on Chrome. I ad ...

javascripthtmlreactjsmaterial-ui

Ajax call for Laravel resource does not support the use of PUT method

In the routes.php file, I have defined the following resource: Route::resource('items', 'ItemsController', ['before' => 'admin_access']); I am attempting to access the ItemsContoller@update method via AJAX but k ...

jqueryajaxlaravellaravel-4laravel-routing

I am looking to show images based on the number chosen from the dropdown menu in CodeIgniter

When a number is selected from the dropdown menu, I want to display images accordingly. The options in the dropdown are 9, 12, and 18. Here is the code snippet for my view page: <form action="<?php echo base_url();?>roxcontrol/numberdisplay" id=" ...

javascriptphpjquerycodeigniter

I am experiencing issues with the visibility of my background on certain mobile browsers

Apologies for repeating a similar question, but I've already tried the solutions mentioned in other posts. On my webpage, I have a table with a background image set using CSS. html { width:100% height: 100%; margin: 0px; padding: 0px; border: none; } ...

htmlcssmobile

Maintain the style of the main navigation menu when hovering over the sub-navigation items

I am currently in the process of redesigning the navigation bar for a specific website. The site utilizes Bootstrap, with a main navbar and a secondary navbar-subnav. While I have been able to style both navs accordingly, I am encountering difficulties whe ...

cssnav

Issue with cutting of rotating pseudo element

Trying to rotate a pseudo element with a background-image is posing a challenge. The background, positioned at the center of the main element for visual effect, ends up being cut off when rotated. An illustrative example has been created using random imag ...

csspseudo-element

Issue with AJAX request on Internet Explorer versions 8 and 9

This script is functioning properly in Internet Explorer 10 and above, as well as Chrome and other browsers. However, it encounters issues specifically with IE8 and IE9. <table id="table" border="1"> <tbody style="display: table-row-group"&g ...

javascriptjqueryajaxcross-browsercross-domain

Utilize Vue.js and express.js to distribute HTML files securely

Currently, my tech stack includes Vue.js for the frontend and Express.js for the backend. When I kick off the express.js server using npm start, my goal is to serve the Vue frontend component. By utilizing the Vue generator and Express generator, I attemp ...

javascripthtmlnode.jsexpressvue.js

Incorporating Tabs with HTML, CSS, and jQuery

After searching for a way to enable tab selection on click within my HTML fragment representing a tabbed interface, I was unable to find a solution. I resorted to manually programming it using JavaScript, which did work, but I feel there must be a more p ...

jqueryhtmlcss

What is the best way to design versatile div containers that combine the float property with fluid dimensions?

I am attempting to achieve a specific layout where the width of the content_container extends up to the right side of the screen and dynamically adjusts based on whether the expandable pane is collapsed or expanded. Applying width: 100% to .content_contain ...

javascripthtmljquerycss

Acquire the Information from a Textarea That Has Been Edited by the User

My challenge lies in taking user-entered text from a content editable textarea and sending it via POST request, but the fields edited by the user are returning with an empty textContent. The code snippet below shows that each .entryRow (obj) contains multi ...

javascriptjqueryhtmljson