The depth order of overlapping elements and the rotation effect achieved through

I have created some interactive flip cards using CSS and HTML with transitions

Currently, when you hover over a card, it flips and enlarges. However, I am facing an issue with positioning the hovered card on top using z-index and relative position due to the CSS transform property. Is there a way to solve this problem?

My goal is to ensure that the card being hovered over always appears on top.

/* Styling for the flip card container */
            .flip-card {
              background-color: transparent;
              width: 180px;
              height: 200px;
              border: 1px solid #f1f1f1;
              perspective: 1000px; /* You can remove this for a simpler effect */
            }

            /* Container for front and back sides of the card */
            .flip-card-inner {
              position: relative;
              width: 100%;
              height: 100%;
              text-align: center;
              transition: transform 0.8s;
              transform-style: preserve-3d;
            }

            /* Flip animation on hover */
            .flip-card:hover .flip-card-inner {
              transform: rotateY(180deg) scale(1.3);
            }

            /* Front and back side positions */
            .flip-card-front, .flip-card-back {
              position: absolute;
              width: 100%;
              height: 100%;
              backface-visibility: hidden;
            }

            /* Front side styling */
            .flip-card-front {
              background-color: #bbb;
              color: black;
              z-index: 1;  
            }

            /* Back side styling */
            .flip-card-back {
              z-index: 999;
              background-color: dodgerblue;
              color: white;
              transform: rotateY(180deg);
            }
<div class="flip-card" style="float:left">
                    <div class="flip-card-inner">
                        <div class="flip-card-front">
                            <div style="position:relative; z-index:1">
                                <img src="img_avatar.png" alt="Avatar" style="width:300px;height:300px;">
                            </div>
                        </div>
                        <div class="flip-card-back">
                            <div style="position:relative; z-index:1">
                                <h1>John Doe</h1> 
                                <p>Architect & Engineer</p> 
                                <p>We love that guy</p>
                            </div>
                        </div>
                    </div>
                </div>

htmlcsscss-transitions

Answer №1

Consider enhancing the .flip-card:hover class with a z-index property.

/* Customize the flip card container - adjust width, height as needed and border for hover effect */

.flip-card {
  background-color: transparent;
  width: 180px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px;
}


/* Container to position front and back sides */

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}


/* Apply horizontal flip on hover over the flip box */

.flip-card:hover {
  z-index: 10;
  position: relative; /* Ensure this class has proper z-index for stacking order */
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg) scale(1.3);
}


/* Position the front and back side elements */

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}


/* Front side styling (used if image is not available) */

.flip-card-front {
  background-color: #bbb;
  color: black;
  z-index: 1;
}


/* Back side styling */

.flip-card-back {
  z-index: 999;
  background-color: dodgerblue;
  color: white;
  transform: rotateY(180deg);
}
<div class="flip-card" style="float:left">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <div style="position:relative; z-index:1">
        <img src="img_avatar.png" alt="Avatar" style="width:300px;height:300px;">
      </div>
    </div>
    <div class="flip-card-back">
      <div style="position:relative; z-index:1">
        <h1>John Doe</h1>
        <p>Architect & Engineer</p>
        <p>We love that guy</p>
      </div>
    </div>
  </div>
</div>

<!-- Repeat similar flip cards here -->

Answer №2

To achieve the desired effect, make sure to include the z-index property in the flip-card:hover section and add position:relative to the card element.

/* Custom styling for a flip card */
.flip-card {
  background-color: transparent;
  width: 180px;
  height: 200px;
  border: 1px solid #f1f1f1;
  position: relative;
  perspective: 1000px; /* For the 3D effect */
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg) scale(1.3);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: #bbb;
  color: black;
    z-index:1;
}

.flip-card-back {
    z-index:999;
  background-color: dodgerblue;
  color: white;
  transform: rotateY(180deg);
}
.flip-card:hover{
  z-index: 9;
}
<div class="flip-card" style="float:left">
                <div class="flip-card-inner">
                    <div class="flip-card-front">
                        <div style="position:relative; z-index:1">
                            <img src="img_avatar.png" alt="Avatar" style="width:300px;height:300px;">
                        </div>
                    </div>
                    <div class="flip-card-back">
                        <div style="position:relative; z-index:1">
                            <h1>John Doe</h1> 
                            <p>Architect & Engineer</p> 
                            <p>We love that guy</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="flip-card" style="float:left">
                <div class="flip-card-inner">
                    <div class="flip-card-front">
                      ...
                        <p>We love that guy</p>
                        </div>
                    </div>
                </div>
            </div>

Answer №3

To achieve the flip card effect, include position: relative in your .flip-card class and add z-index: 1 within the .flip-card:hover case.

The dimensions of the flip card container can be adjusted as needed. The border property has been added to showcase the hover effect extending beyond the box. If you prefer a 2D look, simply remove the perspective property. 

.flip-card {
  background-color: transparent;
  width: 180px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
  position: relative
}
.flip-card:hover {
  z-index: 1
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg) scale(1.3);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color: #bbb;
  color: black;
    z-index:1;
  
}

/* Style the back side */
.flip-card-back {
    z-index:999;
  background-color: dodgerblue;
  color: white;
  transform: rotateY(180deg);
}
<div class="flip-card" style="float:left">
                <div class="flip-card-inner">
                    <div class="flip-card-front">
                        <div style="position:relative; z-index:1">
                            <img src="img_avatar.png" alt="Avatar" style="width:300px;height:300px;">
                        </div>
                    </div>
                    <div class="flip-card-back">
                        <div style="position:relative; z-index:1">
                            <h1>John Doe</h1> 
                            <p>Architect & Engineer</p> 
                            <p>We love that guy</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="flip-card" style="float:left">
                <div class="flip-card-inner">
                    <div class="flip-card-front">
                        <div style="position:relative; z-index:1">
                            <img src="img_avatar.png" alt="Avatar" style="width:300px;height:300px;">
                        </div>
                    </div>
                    <div class="flip-card-back">
                        <div style="position:relative; z-index:1">
                            <h1>John Doe</h1> 
                            <p>Architect & Engineer</p> 
                            <p>We love that guy</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="flip-card" style="float:left">
                <div class="flip-card-inner">
                    <div class="flip-card-front">
                        <div style="position:relative; z-index:1">
                            <img src="img_avatar.png" alt="Avatar" style="width:300px;height:300px;">
                        </div>
                    </div>
                    <div class="flip-card-back">
                        <div style="position:relative; z-index:1">
                            <h1>John Doe</h1> 
                            <p>Architect & Engineer</p> 
                            <p>We love that guy</p>
                        </div>
                    </div>
                </div>
            </div>

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

Effective Methods for Implementing CSS Variables within nth-child Selectors

Objective: To pass a variable successfully as a parameter to nth-child. The task is to make the third line turn green in the example provided. Dilemma: Currently, the parameter is being disregarded as a variable. Inquiry: Is achieving this possible? If s ...

css

What is the best way to showcase an array of objects in a table using AngularJS that updates

My technology stack includes angular.js for the front-end, node.js for server-side operations, and PostgreSQL for managing my database. Currently, I have a list of values stored in the database: Upon checking the controller code, I obtained the following ...

htmlangularjshtml-table

Is there a way to successfully submit multiple locations, each separated by commas, through the multipart form?

Here is my HTML form: <form method="POST" enctype="multipart/form-data" v-on:submit.prevent="handelSubmit($event);"> <div class="clear"> <div class="col-md-3"></div> <div class="col-md-6"> <div class="form ...

javascripthtmlvue.jsvue-componentform-data

Tips for designing a search bar using Angular

search : ____________ I am interested in designing a search bar functionality that automatically triggers when the user inputs 8 or more characters. The input text will be stored in a variable, the search bar will be reset, and the backend API will be che ...

javascripthtmlangular

Converting XML to HTML with the help of XSLT transformation customization

I need assistance in adjusting the XSLT 1.0 transform within the provided xsl file to create an HTML version of the table coded in the attached XML file. The generated HTML output file should display the table from the XML file with alternating row backgro ...

htmlxmlxslt

Tips for including multiple spaces within a cell of a table

I've come across an issue while working on a table and attempting to insert text with multiple spaces. For example, I want to add the text HELLO<1stSPACE><2ndSPACE>WORLD. However, when I enter it as HELLO WORLD, it only displays with a single s ...

htmlcsshtml-table

Unable to expand Bootstrap navbar due to collapsing issue

I recently implemented a collapsed navbar on my website using bootstrap. However, I'm facing an issue where it does not open when clicking on the hamburger menu. After researching various solutions for this problem and trying them out, none of them s ...

javascriptjqueryhtmlcsstwitter-bootstrap

The background-repeat property in CSS appears to cease functioning when the container becomes too wide

Exploring various combinations of space and round values for background-repeat, I've discovered a way to utilize radial gradients to create a visually appealing dotted border on an element without having the dots cut off. .test { background-repeat: ...

csssafaribackground-imagebackground-repeat

How come the pop-up isn't displaying in the middle of the screen?

I have encountered a positioning issue while using a semantic modal with Angular. The problem arises when I try to display the modal as it does not appear in the correct position. Below is the code snippet from my HTML file: <div class="ui modal"> ...

javascripthtmlangularjssemantic-ui

Attempting to replicate the flipping motion of a card by applying the transform property to rotate a div element, ultimately revealing a different

I am attempting to create a series of divs that simulate the flipping action of a notecard. Unfortunately, when I hover over the div, it turns white because I have set the display property to none. I am unsure how to make the other div (.back) visible. Y ...

htmlcss

Sorting Json Data Using Vue

My experience with Vue.js led me to a challenge I can't quite figure out: how to filter specific data in a Json file. Let me provide more context: I have a Json file filled with various electronics products such as computers, mice, keyboards, etc. I w ...

htmljsonvue.js

Preventing Banner Images from Covering Side Carts in E-commerce Stories - Tips and Tricks

I'm encountering an issue with the side cart and suspect that my CSS is to blame. Can you assist me in resolving this problem? The webpage has a background image—a full-width banner. However, when I open the side cart, the image overlaps it, concea ...

htmlcssimagebackground

A guide on seamlessly transitioning from a mobile website to the corresponding native app

I am currently working on a mobile website project. This website is built using basic HTML and is accessed through a URL on a web browser, not as a native app or through PhoneGap. The client has requested links to their Facebook, Pinterest, YouTube, Twitt ...

javascriptandroidhtmliosfacebook

I aim to toggle the visibility of input fields upon clicking a button

Form.html <form [formGroup]="myForm"> <ion-button [(ngModel)]="isActive"(click)="onClick()" >Add</ion-button> <ion-item> <ion-label position="floating">First Name</ion-label&g ...

htmlcssangularionic-frameworkionic4

Custom Homepage with Integrated Google Web Search and Autocomplete Feature

Is there a way to incorporate the standard Google web search with autocomplete into my own webpage, without using a custom search engine like www.google.com? I have been unable to find any examples or guides on how to accomplish this. All the resources see ...

htmlajax

Guide on enabling the scrollbar within a text area while utilizing the pointer-events: none property

After applying the CSS rule pointer-events: none to the text area, I noticed that the scrollbar was disabled. I need the scrollbar to remain enabled so that users can scroll and view the entire content, while still preventing editing within the textarea u ...

htmlcsssassflexboxscss-mixins

Tips for maintaining row position while zooming your browser above 100% with Bootstrap

I am experiencing a small issue with the bootstrap grid system. I have set up a row with two sections using col-md-6. However, when I zoom in my browser to over 100%, the Close label and input move to the next line. I want them to stay in the same place re ...

htmltwitter-bootstrap

Display the code exactly as it appears

Important Note: I have to insert the following code three times in the HTML body of a static webpage. Instead of repeating it multiple times and cluttering the code, I prefer to have a single line (repeated three times) that calls the function to output th ...

phphtmlescaping

Tips for efficiently printing invoices on specific paper: Print a maximum of 20 items per sheet, and if it exceeds this limit, continue onto the next page. Ensure the total amount is

$(document).ready(function(){ var j = 23; for (var i = 0; i < j+11; i++) { if (i != 0 && i % 11 == 0) { $("#printSection div").append("<?php echo '<tr><td>fff</td></tr>'; ?>"); ...

javascriptjqueryhtmlcss

Subject line matches webpage header

Is it possible to automatically generate an email subject that includes the title of the webpage from where the user is sending an email? For instance: If my webpage's title is "About Us," Can the email subject be "About Us" as well? I am not very ...

phphtml