Text moving after the animation

Question

I have a div which contains an h2 and a p. I have a transition of opacity. its opacity goes from 0 to 1 when we hover at that. The problem is that when I hover at that, the transition happens but after that, the last lines of h2 and p moves some pixels up. I do not know how to fix that. Pls try to not to use JS. Thanks!

CSS:

*, *::after, *::before{
    margin: 0px;
    padding: 0px;
}

.container{
    display: flex;
    justify-content: center;
    background-color: white;
}

.card{
    background-color: black;
    position: relative;
    margin: 1rem;
    overflow: hidden;
    border-radius: 50%;
    transition:
        scale 300ms ease-out, 
        transform 400ms ease-out, 
        border-radius 300ms ease-out;
}

.card::before{
    content: "";
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;
    position: absolute;
    z-index: 1;
    top: 1rem;
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    transform: scale(0, 1);
    transition: transform 300ms ease-out;
}

.card::after{
    content: "";
    border-left: 1px solid gray;
    border-right: 1px solid gray;
    position: absolute;
    z-index: 1;
    top: 1rem;
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    transform: scale(1, 0);
    transition: transform 300ms ease-out;
}

.card-img{
    opacity: 2;
    max-width: 100%;
    display: block;
    transition: opacity 300ms ease-out;
}

.card-content{
    z-index: 2;
    position: absolute;
    top: 50%;
    color: white;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 300ms ease-out 100ms;
}

.card-title{
    margin: 0.5rem;
}

.card-body{
    margin: 0.5rem;
}

.card:hover .card-content{
    opacity: 0.8;
}

.card:hover .card-img{
    opacity: 0.5;
}

.card:hover::before{
    transform: scale(1.05, 1);
}

.card:hover::after{
    transform: scale(1, 1.05);
}

.card:hover{
    transform: scale(1.1);
    border-radius: 23px;
}

<!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/style.css">
    <title>Card</title>
</head>
<body>
    <div class="container">
        <div class="card">
            <img src="img/1.jpg" alt="1" class="card-img">
            <div class="card-content">
                <h2 class="card-title">Something to Code</h2>
                <p class="card-body">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusamus, architecto. Lorem ipsum dolor sit amet consectetur.</p>
            </div>
        </div>
        <div class="card">
            <img src="img/2.jpg" alt="1" class="card-img">
            <div class="card-content">
                <h2 class="card-title">Something to Code</h2>
                <p class="card-body">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusamus, architecto. Lorem ipsum dolor sit amet consectetur.</p>
            </div>
        </div>
    </div>
</body>
</html>

score 0 · Accepted Answer · answered May 29 '21 at 14:39

The main issue here is .card:hover{ transform: scale(1.1); } This causes the card-content to grow and re render and that can sometimes cause the text to jump.

Adding

-webkit-backface-visibility: hidden;
-moz-backface-visibility:    hidden;
-ms-backface-visibility:     hidden;

to .card-content will fix the problem in this case

*, *::after, *::before{
    margin: 0px;
    padding: 0px;
}

.container{
    display: flex;
    justify-content: center;
    background-color: white;
}

.card{
    background-color: black;
    position: relative;
    margin: 1rem;
    overflow: hidden;
    border-radius: 50%;
    transition:
        scale 300ms ease-out, 
        transform 400ms ease-out, 
        border-radius 300ms ease-out;
}

.card::before{
    content: "";
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;
    position: absolute;
    z-index: 1;
    top: 1rem;
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    transform: scale(0, 1);
    transition: transform 300ms ease-out;
}

.card::after{
    content: "";
    border-left: 1px solid gray;
    border-right: 1px solid gray;
    position: absolute;
    z-index: 1;
    top: 1rem;
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    transform: scale(1, 0);
    transition: transform 300ms ease-out;
}

.card-img{
    opacity: 2;
    max-width: 100%;
    display: block;
    transition: opacity 300ms ease-out;
}

.card-content{
    z-index: 2;
    position: absolute;
    top: 50%;
    color: white;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 300ms ease-out 100ms;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility:    hidden;
    -ms-backface-visibility:     hidden;
}

.card-title{
    margin: 0.5rem;
}

.card-body{
    margin: 0.5rem;
}

.card:hover .card-content{
    opacity: 0.8;
}

.card:hover .card-img{
    opacity: 0.5;
}

.card:hover::before{
    transform: scale(1.05, 1);
}

.card:hover::after{
    transform: scale(1, 1.05);
}

.card:hover{
    transform: scale(1.1);
    border-radius: 23px;
}

<!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/style.css">
    <title>Card</title>
</head>
<body>
    <div class="container">
        <div class="card">
            <img src="https://via.placeholder.com/600x600" alt="1" class="card-img">
            <div class="card-content">
                <h2 class="card-title">Something to Code</h2>
                <p class="card-body">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusamus, architecto. Lorem ipsum dolor sit amet consectetur.</p>
            </div>
        </div>
        <div class="card">
            <img src="https://via.placeholder.com/600x600" alt="1" class="card-img">
            <div class="card-content">
                <h2 class="card-title">Something to Code</h2>
                <p class="card-body">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusamus, architecto. Lorem ipsum dolor sit amet consectetur.</p>
            </div>
        </div>
    </div>
</body>
</html>

I have put "MR." in the title section and the name of the person in the body so it is not coming even without the code that you gave but when I put that, it is coming. That gitch is there with code. And even if I add a lot of text, then also the glich happens. So I am very sorry to say but the code is not working. — Krishna Agarwal, May 30 '21 at 06:42

Text moving after the animation

1 Answers1