【发布时间】：2021-08-17 11:50:00
【问题描述】：
我有一个包含 h2 和 p 的 div。我有一个不透明的过渡。当我们将鼠标悬停在那里时，它的不透明度从 0 变为 1。问题是当我悬停在那里时，会发生过渡，但在那之后，h2 和 p 的最后一行会向上移动一些像素。我不知道如何解决。 请尽量不要使用 JS。谢谢！
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>【问题讨论】：
标签： html css css-transitions transform opacity