csshover怎么用，csshover用法教程-易企推网

csshover怎么用，csshover用法教程

1.实现效果

csshover怎么用，csshover用法教程

在这里插入图片描述

2.实现步骤

定义一个宽高为300px的父容器

.box { position: relative; width: 300px; height: 300px;}

父容器中添加一张图片，与父容器大小一致

csshover怎么用，csshover用法教程

在这里插入图片描述

.box img { width: 100%; height: 100%;}

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

csshover怎么用，csshover用法教程

在这里插入图片描述

.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过渡

csshover怎么用，csshover用法教程

在这里插入图片描述

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

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

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

csshover怎么用，csshover用法教程

在这里插入图片描述

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

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

csshover怎么用，csshover用法教程

在这里插入图片描述

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

csshover怎么用，csshover用法教程

在这里插入图片描述

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