| .card { width: 400px; margin: 0px auto; background-color: white; box-shadow: 0px 5px 20px #555; } .card:hover .card-image img { width: 110%; filter: grayscale(0); } .card-image { height: 250px; position: relative; overflow: hidden; } .card-image img { width: 100%; position: absolute; top: 60%; left: 50%; transform: translate(-50%, -50%); filter: grayscale(1); transition-property: filter width; transition-duration: .3s; } .card-body { text-align: center; padding: 15px 20px; box-sizing: border-box; } .card-date { font-family: 'Source Sans Pro', sans-serif; } .card-title,.card-exceprt { font-family: 'Playfair Display', serif; } .card-date,.card-title { text-align: center; text-transform: uppercase; font-weight: bold; letter-spacing: 1px; } .card-date,.card-exceprt,#case-title { color: #777; } #case-title { position: absolute; font: 18px 'Microsoft YaHei'; top:10px; left:0px; right:0px; margin:auto; display:block; text-align:center; text-decoration: none; } |
<html>
<head>
<title>卡片制作</title>
<link href="Card.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div class="card">
<div class="card-image">
<img src="flower.jpg" alt="Flower" />
</div>
<div class="card-body">
<div class="card-date">
<time>
11 September 1994
</time>
</div>
<div class="card-title">
<h3>
Happy Birthday!
</h3>
</div>
<div class="card-exceprt">
<p>
Happy birthday my dear!Hope you rose all the way and life is
gentle with you forever!
</p>
</div>
</div>
</div>
</body>
</html>
465
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
