HTML+CSS 图片悬停组件
| 经营范围：电脑组装，电脑维修，智能家居设备，苹果电脑系统安装，苹果手机刷机，监控安装，媒体编辑，数据恢复，复印打印，网站制作等 |
HTML：
|
<!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>图片悬停组件</title> <link rel="stylesheet" href="./37-图片悬停组件.css"> </head>
<body> <div class="container"> <div class="box"> <div class="img-box"> <img src="./images/4.jpg" alt=""> </div> <div class="text-box"> <div> <h2>娜美</h2> <p>娜美，日本漫画《航海王》及衍生作品中的女主角，草帽一伙的航海士，人称“小贼猫”。</p> </div> </div> </div> <div class="box"> <div class="img-box"> <img src="./images/5.jpg" alt=""> </div> <div class="text-box"> <div> <h2>乌索普</h2> <p>乌索普，日本漫画《海贼王》及其衍生作品中的男性角色。草帽一伙狙击手，被称作“GOD·乌索普”。</p> </div> </div> </div> <div class="box"> <div class="img-box"> <img src="./images/6.jpg" alt=""> </div> <div class="text-box"> <div> <h2>乔巴</h2> <p>托尼托尼·乔巴，日本漫画《航海王》及其衍生作品中的角色。乔巴是草帽一伙的船医，吃了人人果实的驯鹿，可用蓝波球进行八段变形。</p> </div> </div> </div> <div class="box"> <div class="img-box"> <img src="./images/7.jpg" alt=""> </div> <div class="text-box"> <div> <h2>弗兰奇</h2> <p>弗兰奇（原名：卡特·弗兰姆）是日本漫画《航海王》及其衍生作品中的角色。草帽一伙船匠，性格豪放，喜欢唱歌，跳奇怪的舞，下身喜欢只穿一条短裤。身为改造人的弗兰奇，藏着各种兵器。</p> </div> </div> </div> </div> </body>
</html> |
CSS:
|
* { margin: 0; padding: 0; box-sizing: border-box; }
body { height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #e8e8e8; }
.container { position: relative; display: flex; flex-direction: row; flex-wrap: wrap; cursor: pointer;
}
.container .box { position: relative; width: 275px; height: 275px; overflow: hidden; transition: 0.5s; margin: 25px; }
.container .box:hover { transform: scale(1.25); box-shadow: 0 25px 40px rgba(0, 0, 0, 0.5); z-index: 1; }
.container .box .img-box { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.container .box .img-box::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(to top, #222, transparent); z-index: 1; opacity: 0; transition: 0.5s; }
.container .box:hover .img-box::before { opacity: 1; }
.container .box .img-box img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.container .box .text-box { position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 20px; display: flex; align-items: flex-end; color: #fff; z-index: 2; }
.container .box .text-box h2 { font-size: 20px; margin-bottom: 10px; transform: translateY(200px); transition: 0.5s; }
.container .box:hover .text-box h2 { transform: translateY(0); transition-delay: 0.3s; }
.container .box .text-box p { font-size: 13px; line-height: 20px; transform: translateY(200px); transition: 0.5s; }
.container .box:hover .text-box p { transform: translateY(0); transition-delay: 0.4s; } |
