csshover怎么用，csshover用法教程

 csshover怎么用，csshover用法教程  

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%;}

• 为父容器添加伪元素，宽高与父元素一致，背景色为50%的白色，基于父容器left为0，top为0，默认opacity设置为0，即不可见，并设置0.4s的transition过渡

在这里插入图片描述

.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;}

• 父容器添加hover事件，当hover时候，为图片添加filter滤镜，设置透明度以及0.4s的transition过渡

在这里插入图片描述

.box img {  + transition: all 0.4s;}

.box:hover img { opacity: 0.8; filter: brightness(1.5);}

• 父容器添加hover事件，当hover时候，修改伪元素的高度为70%，设置border-radius圆角，将opacity改为1

在这里插入图片描述

.box:hover:before {  height: 70%;  border-radius: 0 0 150px 150px;  box-shadow: 0 0 20px #000;  opacity: 1;}

• 父容器添加圆角区域展示内容，方便调试，可以将hover状态选中

在这里插入图片描述

• 圆角区域添加两行文字（可根据需求进行修改），默认opacity设置为0，即不可见，并设置1s的transition过渡

在这里插入图片描述

<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;}

• 父容器添加hover事件，当hover时候，圆角区域将opacity改为1

在这里插入图片描述

本文地址：百科问答频道 https://www.neebe.cn/wenda/917324.html，易企推百科一个免费的知识分享平台，本站部分文章来网络分享，本着互联网分享的精神，如有涉及到您的权益，请联系我们删除，谢谢！