.box:hover .box-content { opacity: 1;}
父容器添加底部图标，两个图标flex横向布局，基于父容器absolute定位，水平居中，距离底部10px
在这里插入图片描述
<div class="box"> + <div class="box-icon"> + <div class="icon-item"><span class="iconfont"></span></div> + <div class="icon-item"><span class="iconfont"></span></div> + </div></div>
.box .box-icon { position: absolute; left: 50%; transform: translateX(-50%); bottom: 10px; display: flex; align-items: center;}.box .icon-item { margin: 0 2px; background: rgba(255, 255, 255, 0.5); height: 35px; width: 35px; text-align: center; line-height: 31px; border: 2px solid #fff; cursor: pointer;}
设置底部图标进行x方向的偏移，两个图标进行相反方向的偏移，偏移出父容器可见区域即可，并设置0.4s的transition过渡
在这里插入图片描述
.box .icon-item{ + transition: all 0.4s;}
.box .icon-item:nth-child(1) { transform: translateX(-200px);}.box .icon-item:nth-child(2) { transform: translateX(200px);}
父容器添加hover事件，当hover时候，设置底部图标进行x方向偏移量为0
在这里插入图片描述
父容器设置overflow: hidden，不展示底部图标
在这里插入图片描述
.box { + overflow: hidden;}
为底部图标添加hover事件，当hover时候，设置圆角，就完成了啦~
在这里插入图片描述
.box .icon-item:hover { background-color: #fff; border-radius: 50%;}
3.实现代码
<!DOCTYPE html><html lang="zh"> <head> <link rel="stylesheet" href="./font.css" /> <link rel="stylesheet" href="../common.css" /> <style> .box { overflow: hidden; position: relative; width: 300px; height: 300px; } .box img { width: 100%; height: 100%; transition: all 0.4s; } .box:before { content: ""; background: rgba(255, 255, 255, 0.5); width: 100%; height: 100%; position: absolute; z-index: 1; top: 0; left: 0; opacity: 0; transition: all 0.4s ease; } .box:hover:before { height: 70%; border-radius: 0 0 150px 150px; box-shadow: 0 0 20px #000; opacity: 1; } .box:hover img { opacity: 0.8; filter: brightness(1.5); } .box .box-content { color: #333; text-align: center; width: 100%; padding: 0 30px; transform: translateX(-50%); position: absolute; top: 25%; left: 50%; z-index: 1; opacity: 0; transition: all 1s ease; } .box-content p:nth-child(1) { font-size: 24px; font-weight: bold; letter-spacing: 8px; text-transform: uppercase; /* 定义无小写字母，仅有大写字母 */ margin: 0 0 2px; } .box-content p:nth-child(2) { font-size: 16px; text-transform: capitalize; /* 文本中的每个单词以大写字母开头 */ } .box:hover .box-content { opacity: 1; } .box .box-icon { position: absolute; left: 50%; transform: translateX(-50%); bottom: 10px; display: flex; align-items: center; } .box .icon-item { margin: 0 2px; background: rgba(255, 255, 255, 0.5); height: 35px; width: 35px; text-align: center; line-height: 31px; border: 2px solid #fff; cursor: pointer; transition: all 0.4s; } .box .icon-item:nth-child(1) { transform: translateX(-200px); } .box .icon-item:nth-child(2) { transform: translateX(200px); } .box:hover .icon-item { transform: translateX(0); } .box .icon-item:hover { background-color: #fff; border-radius: 50%; } </style> </head> <body> <div class="box"> <img src="https://i.postimg.cc/GhXrMDN0/card.jpg" alt="图片" /> <div class="box-content"> <p>苏苏小苏苏</p> <p>web 前端</p> </div> <div class="box-icon"> <div class="icon-item"><span class="iconfont"></span></div> <div class="icon-item"><span class="iconfont"></span></div> </div> </div> </body></html>
本文地址：IT百科频道 https://www.hkm168.com/tags/917324_2.html，易企推百科一个免费的知识分享平台，本站部分文章来网络分享，本着互联网分享的精神，如有涉及到您的权益，请联系我们删除，谢谢！
相关阅读
