作者：吴雨醒 | 来源：互联网 | 2023-06-23 18:10
实现的效果
html部分
<html lang&＃61;"en">
<head><meta charset&＃61;"UTF-8"><meta name&＃61;"viewport" content&＃61;"width&＃61;device-width, initial-scale&＃61;1.0"><meta http-equiv&＃61;"X-UA-Compatible" content&＃61;"ie&＃61;edge"><title>图片悬浮效果title><link rel&＃61;"stylesheet" href&＃61;"https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity&＃61;"sha384-50oBUHEmvpQ&＃43;1lW4y57PTFmhCaXp0ML5d60M1M7uH2&＃43;nqUivzIebhndOJK28anvf" crossorigin&＃61;"anonymous"><link rel&＃61;"stylesheet" href&＃61;"./css/index.css">
head>
<body><div class&＃61;"image middle"><img src&＃61;"http://img2.imgtn.bdimg.com/it/u&＃61;1688631197,3554659657&fm&＃61;26&gp&＃61;0.jpg" alt&＃61;""><div class&＃61;"image-content"><h1>Image Titleh1><div class&＃61;"icons"><a href&＃61;"Javascript:;" class&＃61;"icon fas fa-heart">a><a href&＃61;"Javascript:;" class&＃61;"icon fas fa-comment">a><a href&＃61;"Javascript:;" class&＃61;"icon fas fa-share">a>div>div>div>
body>
html>
css部分
* {padding: 0;margin: 0;font-family: "montserrat";
}body {background: #ddd;
}.middle {position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);
}.image {width: 440px;height: 300px;overflow: hidden;cursor: pointer;
}.image-content {position: absolute;top: 0;left: 0;width: 100%;height: 100%;padding: 40px;box-sizing: border-box;
}.image-content h1 {color: #fff;text-transform: uppercase;transform: translateY(20px);transition: 0.4s;
}.image:hover .image-content h1 {transform: translateY(0px);
}.icons {position: absolute;right: 40px;bottom: 40px;
}.icon {text-decoration: none;color: #333;font-size: 22px;margin: 0 8px;transform: translateY(80px);
}.image:hover .icon {transform: translateY(0px);
}.icon:nth-of-type(1){transition: transform 0.4s 0.05s,color 0.4s
}.icon:nth-of-type(2){transition: transform 0.4s 0.1s,color 0.4s
}.icon:nth-of-type(3){transition: transform 0.4s 0.15s,color 0.4s
}.icon:hover {color: #0984e3;
}.image-content::before {content:"";position: absolute;left: 0;bottom: 0;background: rgba(255,255,255,.7);width: 100%;height: 0px;clip-path: polygon(0 100%,100% 0,100% 100%);transition: 0.5s
}.image-content:hover::before {height: 140px;
}
京公网安备 11010802041100号