Flipping a combination of CSS 3 and JavaScript cards will cause them to flip all together in unison

Hello! I came across a really cool card flip code that is IE compatible. I made some modifications to it and got it working, but there's one problem - instead of flipping the selected card, it flips all the cards. I tried modifying the JavaScript code but couldn't get it to work:

Check out the code here

Here is the HTML:

<div class="c-services__item">
  <div class="c-services__item__content">
   <div class="c-services__item--front">Front</div>
   <div class="c-services__item--back">Back</div>
  </div>
 </div>
<div class="c-services__item">
  <div class="c-services__item__content">
   <div class="c-services__item--front">Front</div>
   <div class="c-services__item--back">Back</div>
  </div>
 </div>

JavaScript:

 $('.c-services__item').hover(function(){$('.c-services__item').toggleClass('applyflip');}.bind(this));

I attempted to modify it like this:

    $(".c-services__item").hover(function(){
        $(this).find(".c-services__item").toggleClass("applyflip");}.bind(this));
    });
});

but that didn't fix the issue.

CSS :

.c-services__item {
    perspective: 1000px;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    -o-perspective: 1000px;
    -ms-perspective: 1000px;
    width: 200px;
    height: 337px;
}

.c-services__item .c-services__item__content {
    transition: 0.5s ease-out;
    -webkit-transition: 0.5s ease-out;
    -moz-transition: 0.5s ease-out;
    -o-transition: 0.5s ease-out;
    -ms-transition: 0.5s ease-out;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;

     // content backface is visible so that static content still appears
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
    -moz-backface-visibility: visible;
    -o-backface-visibility: visible;
    -ms-backface-visibility: visible;

    position:relative;
    width: 100%;
    height: 337px;

}
.c-services__item.applyflip .c-services__item__content {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
}


.c-services__item .c-services__item__content .c-services__item--static {
    // Half way through the card flip, rotate static content to 0 degrees
    transition: 0s linear 0.17s;
    -webkit-transition: 0s linear 0.17s;
    -moz-transition: 0s linear 0.17s;
    -o-transition: 0s linear 0.17s;
    -ms-transition: 0s linear 0.17s;
    transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);

    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 337px;

    line-height:100px;
}

.c-services__item.applyflip .c-services__item__content .c-services__item--static {
 // Half way through the card flip, rotate static content to -180 degrees -- to negate the flip and unmirror the static content
    transition: 0s linear 0.17s;
    -webkit-transition: 0s linear 0.17s;
    -moz-transition: 0s linear 0.17s;
    -o-transition: 0s linear 0.17s;
    -ms-transition: 0s linear 0.17s;
    transform: rotateY(-180deg);
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
}

...and so on...

Answer №1

Avoid using the .find() method.

$(".c-offers__item").mouseover(function(){
    $(this).toggleClass("flip");

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

Attempting to store an array in a database while avoiding duplicate entries

English is not my first language, so I apologize in advance if my explanation is unclear. I am currently working on developing a game where each player is assigned a specific role. However, I've encountered an issue with repetitive numbers being inser ...

Troubleshooting Problems with CSS Media Queries on Various 1280 screens

I'm facing an issue with creating a responsive layout using CSS media queries to adapt to different screen resolutions. Even though I've set up Media Queries for specific resolutions like: /*1280 x 1024*/ /*1280 x 960*/ /*1280 x 800*/ /*1280 x 7 ...

Is there a way to transfer a significant volume of data from one webpage to another without relying on the POST

Currently, I am utilizing a web server framework that exclusively operates with GET requests. Presently, my task involves transferring a substantial volume of data (specifically the text content in a textarea) inputted by users onto another page where it i ...

Unable to highlight text within a div container

I am currently facing an issue with my layout that involves three columns stacked to the left and four inner columns with three floated left and one floated right. This configuration is causing a problem where I cannot select any text on the page. Removing ...

Pop-up message on card selection using JavaScript, CSS, and PHP

I have a total of 6 cards displayed in my HTML. Each card, when clicked, should trigger a modal window to pop up (with additional information corresponding to that specific card). After spending a day searching for a solution online, I've come here s ...

Storing data as a JSON string in a JavaScript object and saving it to

Have you ever wondered why the cart object is saved as "cart" in the local storage instead of being an actual object? This discrepancy is causing the cart not to display correctly. This issue arose after deploying the website on Vercel. Storing "cart" as ...

Animating a background photo with jQuery *issue?*

I'm struggling with animating a background image using the following code: $('div.holder-inner').css({backgroundPosition: '0px 0px'}); $('#up').click(function(){ // alert('!'); $(&a ...

Issue with mix-blend-mode causing text to not show up on top of the gradient

I am struggling to find a way to make text easily readable over my gradient background. Despite trying to use MUI's Typography or a simple <p>, the contrast isn't great as the text appears in black. After some research, I discovered that I ...

Revisiting the Issue: Jquery Hover Effect Fails to Function in Internet Explorer

Can anyone provide assistance with this issue? The code snippet works perfectly in all browsers except for IE, where the menu does not fade in and looks unattractive. html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o ...

"Creating a visually appealing movie showcase with the power of Jquery

As I work on developing my portfolio website, I am focused on creating designs that are large in size, with a minimum of 1600x900. This allows for better viewing as I design them on a wide screen. Currently, I am utilizing Jquery to enlarge the images on ...

Tips for removing red borders on required elements or disabling HTML validation

I am on a mission to completely eliminate HTML validation from my project. Although this question suggests that having all inputs inside forms can help, I am using angularjs and do not require a form unless I need to validate all fields in a set. Therefore ...

Materialize CSS dropdown select arrow out of position

Here is a snapshot of the Materialize CSS, which can be viewed at: However, I am encountering an issue where the dropdown arrow appears below the list instead of on the side. I am currently using Django 3. How can I resolve this? https://i.sstatic.net/d ...

The Strapi admin panel seems to be stuck on an eternal loading loop when accessed locally on my localhost

section, some unexpected issues arose recently. This sudden occurrence took place following some modifications that involved adding a significant number of new Fields attributes to a specific Collection Type. As a result, my Strapi CMS NodeJS backend is n ...

Executing a function following the removal of an element

I am trying to remove an element after exiting a jQuery dialog. I have used the .remove() function, but the element is not accessible after executing .remove(). How can I "destroy" an object in JavaScript and allow it to be called again without refreshing ...

Code in Javascript that performs a check for pre-order traversal

I’m interested in writing a preorder traversal code in Java for JavaScript. I’ve been practicing this question on geeksforgeeks: Check if a given array can represent Preorder Traversal of Binary Search Tree This is the algorithm they provided: 1) Cr ...

"An issue arises where the bokeh plot fails to render when generating a

I have been working on embedding a bokeh plot within a webpage served by a simple Flask app. I am using the embed.autoload_server function that I found in the bokeh embed examples on github. While everything seems to be functioning correctly on the Python ...

Can you explain the step-by-step process of how an await/async program runs in TypeScript/JavaScript or Python?

As a C++ developer specializing in multithreading, I've been diving into the intricacies of async/await. It's been a challenge for me as these concepts differ from how C++ programs are typically executed. I grasp the concept of Promise objects, ...

Creating a customizable navigation bar using only CSS

I'm currently working on creating a navigation bar using only HTML and CSS, without the need for JavaScript to open and close it. However, I've encountered an issue where the navigation bar remains open even after setting display: none or visibi ...

Creating unique identifiers and names for dynamically generated editable HTML table cells using JavaScript

Clicking the button will trigger the GenerateTable() function to dynamically create a table based on selected options from the drop-down menu as column headings. Below is the JavaScript code, along with instructions on how to assign IDs and names to each t ...

How to vertically center content within a container-fluid in Bootstrap 4

I'm currently working on vertically aligning the two rows within the container-fluid. They are already aligned horizontally, but I want to center them on the screen. <!DOCTYPE html> <html lang="en"> <head> <! ...