图像悬停效果实现-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_46577631/article/details/127966619

在这里插入图片描述

<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link href="https://cdn.bootcdn.net/ajax/libs/
font-awesome/4.7.0/css/font-awesome.min.css"
rel="stylesheet">
<title>图像悬停</title>
<style>
       *{
    /* 初始化 */
    margin: 0;
    padding: 0;
}
body{
    /* 100%窗口高度 */
    min-height: 100vh;
    /* 弹性布局 水平+垂直居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    background:linear-gradient(#03a9f4,#03a9f4 45%,#fff 45%,#fff 100%) ;
}
.card {
    position: relative;
    width: 300px;
    height: 400px;
    background: #fff;
    border-radius: 10px;
    background: rgba(255,255,255,0.1);
    border-top: 1px solid rgba(255,255,255,0.5);
    backdrop-filter: blur(15px);
    box-shadow: 0 15px 25px rgba(0,0,0,0.1);
}
.imgBx{
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    transform: translateY(30px) scale(0.5);
    transform-origin: top;
    overflow: hidden;
}
.imgBx img{
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.content{
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding-bottom: 30px;
}   
.content .details{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
}
.content .details h2{
    color:#444;
    font-size: 1.5em;
    font-weight: 500;
}
.content .details h2 span{
    color:#03a9f4;
    font-size: 0.7em;
    font-weight: 400;
}
.sci{
    position: relative;
    display: flex;
    margin-top: 5px;
}
.sci li{
    list-style: none;
    margin: 4px;
}
.sci li a{
    width: 45px;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: transparent;
    font-size: 1.25em;
    color:#444;
    text-decoration: none;
    box-shadow: 0 7px 15px rgba(0,0,0,0.1);
    border-top: 1px solid rgba(0,0,0,0.05);
}
</style>
</head>
<body>
     <div class="card">
          <div class="imgBx">
              <img src="./img/头像.jpeg" />
          </div>
          <div class="content">
              <div class="details">
                  <h2>李 嘉 欣<br>
                    <span>中国 香港</span>
                  </h2>
                  <ul class="sci">
                    <li><a href="#"><i class="fa fa-weibo" aria-hidden="true"></i></a></li>
                    <li><a href="#"><i class="fa fa-qq" aria-hidden="true"></i></a></li>
                    <li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
                    <li><a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
                </ul>
              </div>
          </div>
     </div>
</body>
</html>