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

What causes TypeScript to interpret an API call as a module and impact CSS? Encountering a Next.js compilation error

My website development process hit a roadblock when I tried integrating Material Tailwind into my project alongside Next.js, Typescript, and Tailwind CSS. The compilation error that popped up seemed unrelated to the changes, leaving me baffled as to what c ...

csstypescriptnext.jscompiler-errorstailwind-css

Interactive text animation triggered by a click

jQuery ( function ( $ ) { console.log(">>Testing animation"); $('a.loveit').on('click',function(event){ event.preventDefault(); var text = $(this).find('div.love-text'); ...

jquerycss

What could be causing my grid to malfunction once the media query is triggered?

I am in the process of creating a straightforward navigation bar. My goal is to have the <nav> content, which includes the navigation links, positioned inside the header along with the logo (a random image from unsplash.it). To achieve this layout, I ...

htmlcssmedia-queriescss-grid

__str__ method not displaying the string properly

I'm currently developing a Django application and I'm working on displaying the first and last names of the user upon login. This is a snippet of my model - class Admins(models.Model): user = models.OneToOneField(User, on_delete=models.CASCA ...

pythonhtmldjangodjango-modelsdjango-views

Adjust the parent container to match the height of the child container when it is being hovered

I have been searching for a solution to this issue, but none of the answers I found seem to work in my specific case. Currently, I have a "Mega Menu" with links on the left side that expand when hovered over, revealing hidden links with images on the righ ...

htmlcss

Navigating through pages without using Javascript

While working on creating page numbers, I stumbled upon this intriguing CodePen: https://codepen.io/p-ziegler/pen/bmdaaN .b, input[type="radio"] { display: inline-block; width: 16px; height: 16px; vertical-align: middle; } .b { back ...

htmlcsspagination

Navigate through an overflowing element in react/next

I have a component with a fixed width and overflow-x-auto. I want to hide the scroll bar and replace it with arrow buttons for scrolling left and right. How can I add this functionality to my component? Here is the code for my component: <div className ...

javascriptcssreactjsnext.jstailwind-css

observing which specific element corresponds to the nth child?

Exploring the concept illustrated in https://api.jquery.com/eq/, imagine a scenario with the following HTML structure: <ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item ...

javascripthtmljquerydom

Seeing the Bootstrap css load immediately upon the page loading and switching between pages

Upon loading my webpage or navigating between subpages, I've noticed that the Bootstrap.css styles are interfering with my CSS transitions. For some reason, my regular links appear orange initially, but they turn blue during loading or when transition ...

htmljquerycssbootstrap-5

implement a Django for loop within the template by utilizing JavaScript

Is it possible to incorporate a {% for in %} loop and {{ variables }} in a Django template using JavaScript DOM (insertAdjacentText, or textContent) and dynamically load data from the views without refreshing the entire page? If so, can you please guide me ...

javascriptpythonhtmldjangoajax

Exploring the Power of Websharper with Sitelets and Forms

I have been working on developing a form using Websharper to gather user input. Currently, I have identified three actions for my website: type MyAction = | [<CompiledName "">] Index | [<Method "POST">] GetUser of username : string ...

htmlformsf#websharper

Captivating Images accompanied by Descriptive Captions

I was wondering if there is a straightforward method using only CSS and HTML to address this particular issue. I am in the process of creating a marquee that displays images within a fixed-width div. The number of images exceeds the capacity of the div, ...

htmlcss

Troubleshooting a problem with a CSS dropdown menu

For the past couple of hours, I've been trying to troubleshoot the issue with the fly-out menu on the homepage of this website. When hovering over the capabilities link, the fly-out works correctly but the main background doesn't stretch to fit ...

css

CSS border margin-bottom attribute not functioning correctly

I am trying to create a page border by wrapping it around the content using a <div> element. The parent element is the actual page itself. However, I'm having trouble with the margin-bottom property as it doesn't seem to be working properly ...

htmlcssbordermargin

Where is the location of the directory on the hard drive that was created using the getDirectory() method in HTML5?

I have been working on creating, deleting, and reading directories but I am unsure of where they are located on the hard drive. fs.root.getDirectory('something', {create: true}, function(dirEntry) { alert('Congratulations! You have succes ...

javascripthtmlfileapi

Error: Unable to retrieve the value of a null property | ReactJS |

There are two textboxes and one button designed as material UI components. </p> <TextField id="chatidField" /> <br /> <p> <code>Enter Your Name:</code> <hr /> & ...

javascripthtmlcssreactjsmaterial-ui

Managing text size in HTML email designs

How can I maintain consistent font sizes in HTML EMAILS? The fonts look great on the website, but in my email they appear small and close together. Check out Live Demo I've attached a screenshot of how the email appears to me. Any suggestions on h ...

csshtml-emailfont-size

The `appendTo` function in Ajax is used to swap out the current element

I have been working on sending form data to a Servlet using JQuery and then receiving the response from the same JQuery. Check out the code snippet below. <%-- Document : index Created on : Feb 23, 2015, 8:18:52 PM Author : Yohan --% ...

javascriptjqueryhtmlajax

Creating a dynamic 2D image using HTML5 animation

As a beginner HTML5 developer, I have been exploring ways to create an animated image using multiple jpg files stored in a specific folder on my website. My goal is to design an animation of a rabbit running across the page when a user clicks on a button. ...

javascriptjqueryhtmlcss

Insert text within a span tag next to a picture

Greetings everyone, Here is the current structure I am working on: <div class="payment-option clearfix"> <span class="custom-radio pull-xs-left">...</span> <label style="display:inline;width:100%"> <span style="fl ...

htmlcsstwitter-bootstrap-3