CSS - Mistaken overlap - 3D Viewpoint

I've been playing around with CSS perspective to create a 3D card flip effect, but I'm running into an issue where the right-most cards are overlapping incorrectly when they flip. I've tried using Z-Index (knowing that it requires a positioning other than "static"), but it doesn't seem to be working. Any assistance would be greatly appreciated. You can find the project on CodePen at the following link:

https://codepen.io/mikrayall/pen/WNzBxEw

Here is the HTML code snippet:

<div class="card">
        <div id="cardContents" class="cardContents1">
            <div class="cardFront"><h2>A</h2></div>
            <div class="cardBack"><p>Once there was a dog...</p></div>
        </div>
    </div>

    ...
    
    </div>

Below is the CSS code snippet:

/* CSS code here */

I have already tried applying Z-Index to elements like .cardBack, .cardFront, and .cardContents, but the issue persists. Any guidance or solutions would be highly valued. Thank you.

cssoverlapperspective

Answer №1

Include z-index specifically for the hovered card

.card:hover {
  z-index:1;
}

Complete Code

*, *::before, *::after{
    margin: 0;
    box-sizing: border-box;
}

body{
    height:100vh;
    display:flex;
    justify-content:center;
    align-items: center;
    font-family: 'calibri';
    perspective:700px;
    background-image: linear-gradient(180deg, #000, #666)
}
.card{
    margin: auto 10px;
    width:6em;    
    border: 1px solid white;
    border-radius:0.3em;
    perspective: 700px;
    transform: rotateX(45deg);
    transform-style: preserve-3d;
    transform-origin:bottom;
}
#cardContents{
    position: relative;
    width: 6em;
    height: 8em;
    border-radius:0.3em;
    text-align: center;
    transition: transform 0.5s;
    transform-style: preserve-3d;
    transform-origin:bottom;
}
.cardFront, .cardBack{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 0.3em;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    display:grid;
    align-content: center;
}
.cardFront{
    background-color: pink;
    border:0.2em solid white;
}
.cardBack{
    transform: rotateY(180deg);
    background: lightblue;
    border:0.2em solid white;
}
.card:hover {
  z-index:1;
}
.card:hover #cardContents{
    transform: rotateX(-37deg) translateZ(100px) rotateY(180deg) translateY(-40px);
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8>
    <meta http-equiv="X-UA-Compatible" content="IE=edge>
    <meta name="viewport" content="width=device-width, initial-scale=1.0>
    <link rel="stylesheet" href="css.css>
    <title>Document</title>
</head>
<body>
    <div class="card>
        <div id="cardContents" class="cardContents1>
            <div class="cardFront><h2>A</h2></div>
            <div class="cardBack><p>Once there was a dog...</p></div>
        </div>
    </div>

    <div class="card>
        <div id="cardContents" class="cardContents2>
            <div class="cardFront><h2>STORY</h2></div>
            <div class="cardBack><p>A dog and a frog...</p></div>
        </div>
    </div>

    <div class="card>
        <div id="cardContents" class="cardContents3>
            <div class="cardFront><h2>ABOUT</h2></div>
            <div class="cardBack><p>The frog sat on the dog...</p></div>
        </div>
    </div>

    <div class="card>
        <div id="cardContents" class="cardContents2>
            <div class="cardFront><h2>A</h2></div>
            <div class="cardBack><p>Like the dog was a log...</p></div>
        </div>
    </div>

    <div class="card>
        <div id="cardContents" class="cardContents1>
            <div class="cardFront><h2>DOG</h2></div>
            <div class="cardBack><p>The dog ate the frog...!</p></div>
        </div>
    </div>
</body>
</html>

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

Obtaining the CSS class assigned to a specific WebElement

Is it possible to retrieve the CSS class that has been assigned to the selected WebElement? While the getCssValue method is available, it only returns the value of a specific attribute and not the actual class applied to the WebElement. ...

javacssselenium-webdriver

Tips for including space at the beginning and end of a dynamically created table cell

My table is dynamically generated with contents drawn from a database, creating rows based on the data. Each cell has a rounded border and 2px padding for consistency. I want all cells to appear evenly spaced and padded vertically, but I'm facing an ...

csshtml-tablecellpadding

Select either one checkbox out of two available options

My form includes two checkboxes, allowing users to click on both of them. I'm wondering if it's possible to set it up so that only one checkbox can be selected at a time. For example, clicking on the first checkbox would turn it on while turning ...

javascripthtmljquerycss

Sticky footer with overlapping DIV

I am working on a container with three nested divs: header, content, and footer <div class="note"> <div class="header">Title</div> <div class="content" contenteditable="true">Some content</div> <div class="fo ...

htmlcss

Safari is unable to display the button text, while Chrome has no problem showing it

In Safari, the text of the button is not showing up properly. I am able to retrieve the text using jQuery in the console though. However, there seems to be an issue with recognizing the click event. <div class="btn-group btn-group-lg"> <button ...

javascriptjqueryhtmlcsstwitter-bootstrap

Emphasize user-entered text using HTML and CSS

Here's a scenario: a text paragraph is displayed alongside an input box. The user must type the same text into the input box as shown in the paragraph. I'm aiming to highlight the paragraph text in color as the user types, to demonstrate progres ...

htmlcss

Tips for resolving the issue of a Bootstrap dropdown menu overlapping content in its vicinity

I am trying to position a Bootstrap dropdown button on the right-hand side of the page. The dropdown should cover 100% of the page's width and overlay any content when activated. However, there is a large logo on the left-hand side that I want users t ...

javascriptjqueryhtmlcssbootstrap-4

Ensuring Proper Alignment in Bootstrap

https://i.sstatic.net/bGTXG.jpg https://i.sstatic.net/4Vh1k.jpg Having some difficulties displaying JSON data in a grid layout with React. Facing the following challenges: Uneven spacing due to less margin on the left side. Attempts to align ...

cssbootstrap-4alignmentresponsive

What exactly is the significance of "utilizing a universal class name"?

In my current project, I am utilizing Material-UI version 3.1.2 to create the interface. Previously, when I was using Bootstrap4, I included style="overflow-y: scroll; height: 100%" in my head tag to ensure a scrollbar is always present, preventing the ap ...

cssmaterial-ui

Adding tailwind CSS to an existing React project: A step-by-step guide

I currently have a React Project that previously utilized bootstrap classes, but I am now looking to switch to Tailwind CSS. Despite asking for help regarding this transition in my previous query on this question, I did not receive any responses. As a resu ...

javascriptcssreactjstailwind-csstailwind-ui

a new webpage beginning from a different location

Starting from scratch here, I must apologize for not providing any code upfront. The issue at hand is this - I've got a page full of information sorted by ID (retrieved from the database). These IDs are linked from another page where users can click ...

htmlcss

Content fully displayed, excess content cropped

Upon examining the layout of this DOM structure, I noticed a flexbox container with two children. One child has a fixed size, while the other one shrinks with an overflow: hidden. My curiosity lies in finding a way for the content that overflows to remain ...

htmlcssflexboxoverflow

Issues with Stylesheet Rendering in Firefox

Take a look at this Kendo UI Dojo example: https://i.sstatic.net/lVfNM.png When rendered in Firefox, the "right" should also be placed in the header, but it's not. It works correctly in IE11 and Chrome. What am I doing wrong? ...

htmlcsskendo-ui

Tips for customizing the appearance of a chosen radio button

Here is my HTML code snippet: <div class="col-md-12 money-radio-container"> <input type="radio" name="optradio" class="money-radio" value="10">10 <span>$</span> <input type="radio" name="optradio" class="money-radio" val ...

htmlcss

Adjust the top margin of content to account for the height of a fixed header

When dealing with a fixed header that has been removed from the HTML flow, it can be tricky to adjust the content below it. The challenge arises because the height of the header can vary based on screen size. How can we dynamically adjust the margin-top fo ...

jqueryhtmlcss

CSS selector that targets an element exclusively when it contains solely another element, devoid of any additional text

Is there a CSS selector that can target an element, like <p>, with only a specified child element, such as <a>, within it and nothing else? For instance: <p><a>Some text</a></p>. I want to avoid selecting elements like & ...

htmlcssbeautifulsoup

Instructions for creating a scrollable unordered list when it reaches its maximum capacity

My HTML code has a <ul> element with the following structure: <ul id="messages"> </ul> In my HTML file, I have not specified any <li> items. However, in my JavaScript code using jQuery, I dynamically add <li> items to the & ...

javascriptjquerycss

Instructions for resizing an iframe and a div arranged next to each other in a layout similar to jsbin or jsfiddle

I am trying to resize a div and iframe using a toggler, but I am facing some challenges. I have experimented with different solutions such as and , but they are not working smoothly when one div is placed beside an iframe. Even when placing the iframe in ...

jqueryhtmljquery-uicss

Manipulating the DOM in AngularJS Directives without relying on jQuery's help

Let's dive right in. Imagine this as my specific instruction: appDirectives.directive('myDirective', function () { return{ restrict: 'A', templateUrl: 'directives/template.html', link: functio ...

javascriptjqueryhtmlcssangularjs

Issue with jQuery's addClass() function not functioning properly on Internet Explorer versions 8, 9, and possibly others as well

Here is some basic HTML code: <div class="stuff-choice"> <div class="item a"> <label class="signup-checkbox"> <input type="checkbox" value="a" name="stuff[a][]" id="stuff_choice_" class="things"> <strong>A&l ...

jquerycssinternet-explorer