CSS 实现鼠标hover 展示内容
时间：2024-03-30 20:50:41 来源：网络cs 作者：言安琪 栏目：培训机构 阅读：
前言
👏CSS 实现鼠标hover 展示内容，速速来Get吧~
🥇文末分享源代码。记得点赞+关注+收藏！
1.实现效果
2.实现步骤
定义一个宽高为300px的父容器 <div class="box"></box>.box { position: relative; width: 300px; height: 300px;}
<div class="box"> + <img src="https://i.postimg.cc/GhXrMDN0/card.jpg" alt="图片" /></div>.box img { width: 100%; height: 100%;}
.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 img { + transition: all 0.4s;}.box:hover img { opacity: 0.8; filter: brightness(1.5);}
.box:hover:before { height: 70%; border-radius: 0 0 150px 150px; box-shadow: 0 0 20px #000; opacity: 1;}
<div class="box"> + <div class="box-content"> + <p>苏苏小苏苏</p> + <p>web 前端</p> + </div></div>.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 0.4s ease;}
.box:hover .box-content { opacity: 1;}
<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;}
.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);}
.box { + overflow: hidden;}
.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>4.写在最后🍒
看完本文如果觉得对你有一丢丢帮助，记得点赞+关注+收藏鸭 🍕
更多相关内容，关注🍥苏苏的bug，🍡苏苏的github，🍪苏苏的码云~
本文链接：https://www.kjpai.cn/news/2024-03-30/151175.html，文章来源：网络cs，作者：言安琪，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。