CSS 響應(yīng)式卡片懸停效果『代碼評(píng)論區(qū)』『手把手教程』
card.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Spy Family</title>
<link rel="stylesheet" type="text/css" href="card.css">
</head>
<body>
<div class="container">
<div class="card">
<div class="imgBx">
<img src="img1.jpg">
</div>
<div class="content">
<h2>Joel Forger</h2>
<p>Formerly known as Blair, 27 years old. Favorite food is apples and I hate bugs. Ostensibly a female civil servant in the city of Berlin, she is actually a skilled professional killer, codenamed "Princess of Thorns".</p>
</div>
</div>
<div class="card">
<div class="imgBx">
<img src="img2.jpg">
</div>
<div class="content">
<h2>Anya Forger</h2>
<p>One of the protagonists of this work. A girl with superpowers who can read minds to others. In order to enter Eden Academy, he falsely claimed to be 6 years old, but the actual age should be about 4 or 5 years old. </p>
</div>
</div>
<div class="card">
<div class="imgBx">
<img src="img3.jpg">
</div>
<div class="content">
<h2>Lloyd Foger</h2>
<p>The top spy in the West who is engaged in espionage activities in the East, codenamed "Dusk", gave up his real name in order to become a spy, and now uses the identity of Lloyd Forger.</p>
</div>
</div>
</div>
</body>
</html>
card.css
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
*
{
margin: 0;
padding: 0;
font-family: 'Poppins',sans-serif;
}
body
{
display:flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #16384c;
}
.container
{
position: relative;
width: 1100px;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
padding: 30px;
}
.container .card
{
position: relative;
max-width: 300px;
height: 215px;
background: #fff;
margin: 30px 10px;
padding: 20px 15px;
display: flex;
flex-direction: column;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
transition: 0.3s ease-in-out;
}
.container .card:hover
{
height: 420px;
}
.container .card .imgBx
{
position: relative;
width: 260px;
height: 260px;
top: -60px;
left: 20px;
z-index: 1;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
}
.container .card .imgBx img
{
/*max-width: 100%;*/
height: 260px;
width: 260px;
border-radius: 4px;
}
.container .card .content
{
position: relative;
margin-top: -140px;
padding: 10px 15px;
text-align: center;
color:? #111;
visibility: hidden;
opacity: 0;
transition: 0.3s ease-in-out;
}
.container .card:hover .content
{
visibility: visible;
opacity: 1;
margin-top: -40px;
transition-delay: 0.3s;
}
圖片
