纯CSS3实现的鼠标悬停显示遮罩效果

最新推荐文章于 2024-05-29 09:28:06 发布
最新推荐文章于 2024-05-29 09:28:06 发布
阅读量2.5k 收藏
点赞数 1

纯CSS3实现的鼠标悬停显示遮罩效果
对于前段不熟悉的我只有多记录记录所用过的技术了。
需求：当鼠标放到图片上时，图片上方将出现一个带透明度的遮罩层。
贴代码：

<div :height="contentHeight">
                <Avatar :width="66" :src="src" class="**he_slideCaptionDown**">
                  <div v-font="12" v-color:dark>
                    <p>姓名：{{d.pname}}</p>
                    <p>编号：{{d.pcode}}</p>
                  </div>
                  <div class="**he_slideCaptionDown_caption**">
                      <div class="**he_slideCaptionDown_caption_h**">
                          <div class="h-tooltip-show">
                              <Button  color="green" @click.stop="open('edit', d.uuid)" style="border:0px;border-radius: 0px">修改</Button>
                              <Poptip content="确认删除?" @confirm="del(d.uuid)">
                                <Button  color="red"  style="border:0px;border-radius: 0px;">删除</Button>
                              </Poptip>
                          </div>
                      </div>
                  </div>
                </Avatar>
              </div>
          ![鼠标悬停时出现遮罩](https://img-blog.csdnimg.cn/20190522200814346.png)

样式主要为上面标粗的代码，其他样式这里暂时用不到，其他的样式是用来其他效果的，具体看这个网址：https://www.helloweba.net/javascript/312.html
需要引入的样式为：
.

he_border1 {
    background: #fe7253;
    width: 360px;
    height: 240px;
    padding: 0;
    margin: 0;
    border: 1px solid #000;
    position: relative;
    box-sizing: border-box;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    overflow: hidden
}

.he_border1 .he_border1_img {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    position: relative;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    opacity: 1;
    overflow: hidden
}

.he_border1:hover .he_border1_img {
    position: absolute;
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
    opacity: .6
}

.he_border1 .he_border1_caption {
    color: #fff;
    padding: 0;
    margin: 0;
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    overflow: hidden
}

.he_border1 .he_border1_caption::before,
.he_border1 .he_border1_caption::after {
    position: absolute;
    content: '';
    opacity: 0;
    -webkit-transition: opacity 0.4s, -webkit-transform .4s;
    -moz-transition: opacity 0.4s, -moz-transform .4s;
    -o-transition: opacity 0.4s, -o-transform .4s;
    transition: opacity 0.4s, transform .4s
}

.he_border1 .he_border1_caption::before {
    top: 8%;
    right: 10%;
    bottom: 8%;
    left: 10%;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    -webkit-transform: scale(0, 1);
    -moz-transform: scale(0, 1);
    -o-transform: scale(0, 1);
    transform: scale(0, 1);
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0
}

.he_border1 .he_border1_caption::after {
    top: 8%;
    right: 10%;
    bottom: 8%;
    left: 10%;
    border-right: 1px solid #fff;
    border-left: 1px solid #fff;
    -webkit-transform: scale(1, 0);
    -moz-transform: scale(1, 0);
    -o-transform: scale(1, 0);
    transform: scale(1, 0);
    -webkit-transform-origin: 100% 0;
    -moz-transform-origin: 100% 0;
    -o-transform-origin: 100% 0;
    transform-origin: 100% 0
}

.he_border1:hover .he_border1_caption::before,
.he_border1:hover .he_border1_caption::after {
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1)
}

.he_border1 .he_border1_caption,
.he_border1 .he_border1_caption>a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    overflow: hidden;
    z-index: 1000
}

.he_border1 .he_border1_caption_h {
    font-size: 1.3em;
    font-weight: 700;
    text-align: center;
    width: 80%;
    position: absolute;
    top: 20%;
    left: 10%;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    overflow: hidden;
    opacity: 1
}

.he_border1 .he_border1_caption_p {
    font-size: 1em;
    text-align: center;
    width: 80%;
    position: absolute;
    top: 60%;
    left: 10%;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    overflow: hidden;
    opacity: 0
}

.he_border1:hover .he_border1_caption_p {
    top: 45%;
    opacity: 1
}

.he_border2 {
    background: #fe7253;
    width: 360px;
    height: 240px;
    padding: 0;
    margin: 0;
    border: 1px solid #000;
    position: relative;
    box-sizing: border-box;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    overflow: hidden
}

.he_border2 .he_border2_img {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    position: relative;
    opacity: 1;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    overflow: hidden
}

.he_border2:hover .he_border2_img {
    position: absolute;
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
    opacity: .6
}

.he_border2 .he_border2_caption {
    color: #fff;
    padding: 0;
    margin: 0;
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    overflow: hidden
}

.he_border2 .he_border2_caption::before,
.he_border2 .he_border2_caption::after {
    position: absolute;
    content: '';
    opacity: 0;
    -webkit-transition: opacity 0.4s, -webkit-transform .4s;
    -moz-transition: opacity 0.4s, -moz-transform .4s;
    -o-transition: opacity 0.4s, -o-transform .4s;
    transition: opacity 0.4s, transform .4s
}

.he_border2 .he_border2_caption::before {
    top: 14%;
    right: 5%;
    bottom: 14%;
    left: 5%;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    -webkit-transform: scale(0, 1);
    -moz-transform: scale(0, 1);
    -o-transform: scale(0, 1);
    transform: scale(0, 1);
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0
}

.he_border2 .he_border2_caption::after {
    top: 8%;
    right: 10%;
    bottom: 8%;
    left: 10%;
    border-right: 1px solid #fff;
    border-left: 1px solid #fff;
    -webkit-transform: scale(1, 0);
    -moz-transform: scale(1, 0);
    -o-transform: scale(1, 0);
    transform: scale(1, 0);
    -webkit-transform-origin: 100% 0;
    -moz-transform-origin: 100% 0;
    -o-transform-origin: 100% 0;
    transform-origin: 100% 0
}

.he_border2:hover .he_border2_caption::before,
.he_border2:hover .he_border2_caption::after {
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1)
}

.he_border2 .he_border2_caption,
.he_border2 .he_border2_caption>a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    overflow: hidden;
    z-index: 1000
}

.he_border2 .he_border2_caption_h {
    font-size: 1.3em;
    font-weight: 700;
    text-align: center;
    width: 80%;
    position: absolute;
    top: 20%;
    left: 10%;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    overflow: hidden;
    opacity: 1
}

.he_border2 .he_border2_caption_p {
    font-size: 1em;
    text-align: center;
    width: 80%;
    position: absolute;
    top: 60%;
    left: 10%;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    overflow: hidden;
    opacity: 0
}

.he_border2:hover .he_border2_caption_p {
    top: 45%;
    opacity: 1
}

.he_border3 {
    background: #fe7253;
    width: 360px;
    height: 240px;
    padding: 0;
    margin: 0;
    border: 1px solid #000;
    position: relative;
    box-sizing: border-box;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    overflow: hidden
}

.he_border3 .he_border3_img {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    position: relative;
    opacity: 1;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    overflow: hidden
}

.he_border3:hover .he_border3_img {
    position: absolute;
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
    opacity: .6
}

.he_border3 .he_border3_caption {
    color: #fff;
    padding: 0;
    margin: 0;
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    overflow: hidden
}

.he_border3 .he_border3_caption::before,
.he_border3 .he_border3_caption::after {
    position: absolute;
    content: '';
    opacity: 0;
    -webkit-transition: opacity 0.4s, -webkit-transform .4s;
    -moz-transition: opacity 0.4s, -moz-transform .4s;
    -o-transition: opacity 0.4s, -o-transform .4s;
    transition: opacity 0.4s, transform .4s
}

.he_border3 .he_border3_caption::before {
    top: 14%;
    right: 25%;
    bottom: 14%;
    left: 25%;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    -webkit-transform: scale(0, 1);
    -moz-transform: scale(0, 1);
    -o-transform: scale(0, 1);
    transform: scale(0, 1);
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0
}

.he_border3 .he_border3_caption::after {
    top: 25%;
    right: 10%;
    bottom: 25%;
    left: 10%;
    border-right: 1px solid #fff;
    border-left: 1px solid #fff;
    -webkit-transform: scale(1, 0);
    -moz-transform: scale(1, 0);
    -o-transform: scale(1, 0);
    transform: scale(1, 0);
    -webkit-transform-origin: 100% 0;
    -moz-transform-origin: 100% 0;
    -o-transform-origin: 100% 0;
    transform-origin: 100% 0
}

.he_border3:hover .he_border3_caption::before,
.he_border3:hover .he_border3_caption::after {
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1)
}

.he_border3 .he_border3_caption,
.he_border3 .he_border3_caption>a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    overflow: hidden;
    z-index: 1000
}

.he_border3 .he_border3_caption_h {
    font-size: 1.3em;
    font-weight: 700;
    text-align: center;
    width: 80%;
    position: absolute;
    top: 20%;
    left: 10%;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    overflow: hidden;
    opacity: 1
}

.he_border3 .he_border3_caption_p {
    font-size: 1em;
    text-align: center;
    width: 80%;
    position: absolute;
    top: 60%;
    left: 10%;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    overflow: hidden;
    opacity: 0
}

.he_border3:hover .he_border3_caption_p {
    top: 45%;
    opacity: 1
}

.he_3DFlipX {
    display: block;
    width: 360px;
    height: 240px;
    overflow: hidden;
    padding: 0;
    margin: 0;
    border: 0;
    position: relative;
    box-sizing: border-box;
    -webkit-perspective: 1700px;
    -moz-perspective: 1700px;
    perspective: 1700px;
    -webkit-perspective-origin: 50% 50%;
    -moz-perspective-origin: 50% 50%;
    perspective-origin: 50% 50%
}

.he_3DFlipX_inner {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    position: relative;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d
}

.he_3DFlipX_inner>div.he_3DFlipX_img {
    backface-visibility: hidden;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out
}

.he_3DFlipX_inner:hover>div.he_3DFlipX_img {
    -webkit-transform: rotateX(180deg);
    -moz-transform: rotateX(180deg);
    transform: rotateX(180deg)
}

.he_3DFlipX_inner>div img {
    max-width: 100%;
    padding: 0;
    margin: 0;
    display: block;
    position: relative
}

.he_3DFlipX_caption {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0;
    background: #fe7253;
    color: #fff;
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    opacity: 0;
    background-color: #fe7253;
    text-align: center;
    backface-visibility: hidden;
    -webkit-transform: rotateX(-180deg);
    -moz-transform: rotateX(-180deg);
    transform: rotateX(-180deg);
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out
}

.he_3DFlipX_inner:hover .he_3DFlipX_caption {
    opacity: 1;
    -webkit-transform: rotateX(0);
    -moz-transform: rotateX(0);
    transform: rotateX(0)
}

.he_3DFlipX_caption h3 {
    font-size: 1.3em;
    font-weight: 700;
    text-align: center;
    width: 100%;
    position: absolute;
    top: 25%;
    left: 5px;
    margin: 0;
    padding: 0;
    color: #fff
}

.he_3DFlipX_caption p {
    font-size: 1em;
    text-align: center;
    width: 100%;
    position: absolute;
    top: 45%;
    left: 5px;
    margin: 0;
    padding: 0;
    color: #fff
}

.he_3DFlipX a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0
}

.he_3DFlipY {
    display: block;
    width: 360px;
    height: 240px;
    overflow: hidden;
    padding: 0;
    margin: 0;
    border: 0;
    position: relative;
    box-sizing: border-box;
    cursor: pointer;
    -webkit-perspective: 1700px;
    -moz-perspective: 1700px;
    perspective: 1700px;
    -webkit-perspective-origin: 50% 50%;
    -moz-perspective-origin: 50% 50%;
    perspective-origin: 50% 50%
}

.he_3DFlipY_inner {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    position: relative;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d
}

.he_3DFlipY_inner>div.he_3DFlipY_img {
    backface-visibility: hidden;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out
}

.he_3DFlipY_inner:hover>div.he_3DFlipY_img {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg)
}

.he_3DFlipY_inner>div img {
    max-width: 100%;
    padding: 0;
    margin: 0;
    display: block;
    position: relative
}

.he_3DFlipY_caption {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0;
    background: #fe7253;
    color: #fff;
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    opacity: 0;
    background-color: #fe7253;
    text-align: center;
    backface-visibility: hidden;
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out
}

.he_3DFlipY_inner:hover .he_3DFlipY_caption {
    opacity: 1;
    -webkit-transform: rotateY(0);
    -moz-transform: rotateY(0);
    transform: rotateY(0)
}

.he_3DFlipY_caption h3 {
    font-size: 1.3em;
    font-weight: 700;
    text-align: center;
    width: 100%;
    position: absolute;
    top: 25%;
    left: 5px;
    margin: 0;
    padding: 0;
    color: #fff
}

.he_3DFlipY_caption p {
    font-size: 1em;
    text-align: center;
    width: 100%;
    position: absolute;
    top: 45%;
    left: 5px;
    margin: 0;
    padding: 0;
    color: #fff
}

.he_3DFlipY a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0
}

.he_ZoomInImg {
    background: #fe7253;
    width: 360px;
    height: 240px;
    padding: 0;
    margin: 0;
    border: 1px solid #000;
    position: relative;
    box-sizing: border-box;
    cursor: pointer;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    overflow: hidden
}

.he_ZoomInImg .he_ZoomInImg_img {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    opacity: 1;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    overflow: hidden
}

.he_ZoomInImg:hover .he_ZoomInImg_img {
    opacity: .7;
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -o-transform: scale(1.3);
    -ms-transform: scale(1.3);
    transform: scale(1.3)
}

.he_ZoomInImg .he_ZoomInImg_caption {
    color: #fff;
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    overflow: hidden
}

.he_ZoomInImg .he_ZoomInImg_caption,
.he_ZoomInImg .he_ZoomInImg_caption>a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    overflow: hidden
}

.he_ZoomInImg .he_ZoomInImg_caption_h {
    font-size: 1.3em;
    font-weight: 700;
    text-align: center;
    width: 80%;
    position: absolute;
    top: 20%;
    left: 10%;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    overflow: hidden;
    opacity: .8
}

.he_ZoomInImg:hover .he_ZoomInImg_caption_h {
    color: #fff;
    opacity: 1
}

.he_ZoomInImg .he_ZoomInImg_caption_p {
    font-size: 1em;
    text-align: center;
    width: 80%;
    position: absolute;
    top: 45%;
    left: 10%;
    -webkit-transition: all .6s ease-in-out;
    -moz-transition: all .6s ease-in-out;
    -o-transition: all .6s ease-in-out;
    -ms-transition: all .6s ease-in-out;
    transition: all .6s ease-in-out;
    overflow: hidden;
    opacity: 0
}

.he_ZoomInImg:hover .he_ZoomInImg_caption_p {
    color: #fff;
    opacity: 1
}

.he_ZoomOutImg {
    background: #fe7253;
    width: 360px;
    height: 240px;
    padding: 0;
    margin: 0;
    border: 1px solid #000;
    position: relative;
    box-sizing: border-box;
    cursor: pointer;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    overflow: hidden
}

.he_ZoomOutImg .he_ZoomOutImg_img {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    opacity: 1;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    overflow: hidden;
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -o-transform: scale(1.3);
    -ms-transform: scale(1.3);
    transform: scale(1.3)
}

.he_ZoomOutImg:hover .he_ZoomOutImg_img {
    opacity: .7;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1)
}

.he_ZoomOutImg .he_ZoomOutImg_caption {
    color: #fff;
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    overflow: hidden
}

.he_ZoomOutImg .he_ZoomOutImg_caption,
.he_ZoomOutImg .he_ZoomOutImg_caption>a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    overflow: hidden
}

.he_ZoomOutImg .he_ZoomOutImg_caption_h {
    font-size: 1.3em;
    font-weight: 700;
    text-align: center;
    width: 80%;
    position: absolute;
    top: 20%;
    left: 10%;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    overflow: hidden;
    opacity: .8
}

.he_ZoomOutImg:hover .he_ZoomOutImg_caption_h {
    color: #fff;
    opacity: 1
}

.he_ZoomOutImg .he_ZoomOutImg_caption_p {
    font-size: 1em;
    text-align: center;
    width: 80%;
    position: absolute;
    top: 45%;
    left: 10%;
    -webkit-transition: all .6s ease-in-out;
    -moz-transition: all .6s ease-in-out;
    -o-transition: all .6s ease-in-out;
    -ms-transition: all .6s ease-in-out;
    transition: all .6s ease-in-out;
    overflow: hidden;
    opacity: 0
}

.he_ZoomOutImg:hover .he_ZoomOutImg_caption_p {
    color: #fff;
    opacity: 1
}

.he_slideCaptionDown {
    /* background: #fe7253; */
    background: none;
    width: 100%;
    height: 160px;
    padding: 20px;
    margin: 0;
    border: 0px solid #000;
    border-radius: 6px;
    position: relative;
    box-sizing: border-box;
    cursor: pointer;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    overflow: hidden
}

.he_slideCaptionDown .he_slideCaptionDown_caption {
    color: #fff;
    background: rgba(254, 114, 83, 0);
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    -moz-transform: translate3d(0, -100%, 0);
    -o-transform: translate3d(0, -100%, 0);
    -ms-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    overflow: hidden
}

.he_slideCaptionDown:hover .he_slideCaptionDown_caption {
    background: rgba(0, 0, 0, .65);
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

.he_slideCaptionDown .he_slideCaptionDown_caption,
.he_slideCaptionDown .he_slideCaptionDown_caption>a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    overflow: hidden
}

.he_slideCaptionDown .he_slideCaptionDown_caption_h {
    /* font-size: 1.3em; */
    font-weight: 700;
    text-align: center;
    /* width: 80%; */
    position: absolute;
    top: -50%;
    right: 5px;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    overflow: hidden;
    opacity: 0
}

.he_slideCaptionDown:hover .he_slideCaptionDown_caption_h {
    /* color: #fff; */
    top: 3%;
    opacity: 1
}

.he_slideCaptionDown .he_slideCaptionDown_caption_p {
    font-size: 1em;
    text-align: center;
    width: 80%;
    position: absolute;
    top: -50%;
    left: 10%;
    -webkit-transition: all .6s ease-in-out;
    -moz-transition: all .6s ease-in-out;
    -o-transition: all .6s ease-in-out;
    -ms-transition: all .6s ease-in-out;
    transition: all .6s ease-in-out;
    overflow: hidden;
    opacity: 0
}

.he_slideCaptionDown:hover .he_slideCaptionDown_caption_p {
    color: #fff;
    top: 45%;
    opacity: 1
}

.he_slideAllDown {
    background: #fe7253;
    width: 360px;
    height: 240px;
    padding: 0;
    margin: 0;
    border: 1px solid #000;
    position: relative;
    box-sizing: border-box;
    cursor: pointer;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    overflow: hidden
}

.he_slideAllDown .he_slideAllDown_img {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    opacity: .9;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    overflow: hidden
}

.he_slideAllDown:hover .he_slideAllDown_img {
    opacity: 1;
    -webkit-transform: translate3d(0, 100%, 0);
    -moz-transform: translate3d(0, 100%, 0);
    -o-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0)
}

.he_slideAllDown .he_slideAllDown_caption {
    color: #fff;
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    overflow: hidden
}

.he_slideAllDown .he_slideAllDown_caption,
.he_slideAllDown .he_slideAllDown_caption>a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    overflow: hidden
}

.he_slideAllDown .he_slideAllDown_caption_h {
    font-size: 1.3em;
    font-weight: 700;
    text-align: center;
    width: 80%;
    position: absolute;
    top: -50%;
    left: 70%;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    overflow: hidden;
    opacity: 0
}

.he_slideAllDown:hover .he_slideAllDown_caption_h {
    color: #fff;
    top: 25%;
    opacity: 1
}

.he_slideAllDown .he_slideAllDown_caption_p {
    font-size: 1em;
    text-align: center;
    width: 80%;
    position: absolute;
    top: -50%;
    left: 10%;
    -webkit-transition: all .6s ease-in-out;
    -moz-transition: all .6s ease-in-out;
    -o-transition: all .6s ease-in-out;
    -ms-transition: all .6s ease-in-out;
    transition: all .6s ease-in-out;
    overflow: hidden;
    opacity: 0
}

.he_slideAllDown:hover .he_slideAllDown_caption_p {
    color: #fff;
    top: 45%;
    opacity: 1
}
qq_41850239
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
鼠标悬停 显示遮罩层
m0_59849011的博客
11-11 366
HTML部分: css部分: .smallbox { width: 100%; .card { position: relative; top: 0; left: 0; width: 224px; height: 302px; margin-right: 70px; ...
css鼠标悬浮图片遮罩特效
yooellie的博客
02-27 3453
cssdiv>div{ background: rgba(255, 255, 255, 0); transition: background 0.3s linear; } div:hover>div{ background: rgba(228, 228, 228, 0.29); }html<div style="width:200px;height:200px;positio
鼠标悬停，图片出现遮罩效果
09-14
鼠标悬停在图片上，图片从四个方向出现遮罩层效果；并伴随文字出现；鼠标离开遮罩层消失，并伴随文字消失；
html中鼠标悬停动效遮罩,纯CSS3鼠标hover图片条纹遮罩层动画效果源码
weixin_35156503的博客
06-02 285
.box{background: linear-gradient(#8E2DE2,#4A00E0);font-family: 'Merriweather Sans', sans-serif;border-radius: 7px;position: relative;overflow: hidden;}.box:before{content: "";background: -webkit-repea...
css 实现 鼠标停放显示遮罩层的内容
最新发布
weixin_53105591的博客
05-29 114
【代码】css 实现 鼠标停放显示遮罩层的内容。
纯CSS实现鼠标悬停出现遮罩层
zg0601的博客
11-17 4170
CSS实现鼠标悬停出现遮罩层——遮罩层只有背景颜色和既有背景颜色又有背景图片的情况
图片鼠标悬停遮罩效果js特效.zip
07-11
图片鼠标悬停遮罩效果js特效
CSS实现鼠标移至图片上显示遮罩层及文字效果
蓝胖子的博客
11-06 1878
CSS实现鼠标移至图片上显示遮罩层及文字效果
CSS3实现鼠标悬停线条遮罩特效源码.zip
11-02
【标题】：“CSS3实现鼠标悬停线条遮罩特效源码” 这个压缩包中的源码主要涉及CSS3技术，特别是其在创建动态视觉效果方面的应用。CSS3是层叠样式表（Cascading Style Sheets）的第三版，是用于描述HTML或XML（包括...
CSS3卡片悬停图文遮罩显示特效
07-24
本篇将深入探讨"CSS3卡片悬停图文遮罩显示特效"这一主题，以及如何通过CSS3实现这一效果。 首先，"卡片"（Card）布局是现代Web设计中的一个常见模式，它将信息封装在一个自包含的单元中，通常包含图像、标题和描述...
CSS3带标题鼠标悬停遮罩层特效
07-24
本主题聚焦于一个具体的CSS3应用——“带标题的鼠标悬停遮罩层特效”。这种特效为图片列表提供了互动性，提升用户体验，常用于产品展示或相册浏览等场景。 首先，我们要理解遮罩层（Mask Layer）的概念。遮罩层是...
CSS3鼠标悬停图片显示遮罩特效代码
06-11
这是一款基于CSS3实现的鼠标移到图片上显示遮罩显示文字信息，Bootstrap鼠标悬停图片遮罩特效代码。
CSS3鼠标悬停图片遮罩动画特效
06-24
【CSS3鼠标悬停图片遮罩动画特效】是一种在网页设计中常见的交互效果，它可以提升用户体验，使网站或应用更具吸引力。此特效的核心是利用CSS3的特性来实现鼠标悬停时图片上出现遮罩层，并配合动态的图标和文字展示，...
CSS3鼠标悬停线条遮罩效果特效代码
03-20
【描述】提到的"基于js+css3实现的jQuery鼠标悬停事件特效"意味着这个效果不仅依赖于CSS3的新特性，如过渡（transition）、变换（transform）和伪类选择器，还结合了JavaScript（可能是jQuery库）来处理事件监听和...
CSS实现鼠标悬停遮罩效果
码海拾贝
03-22 647
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0"> <title>Bootstrap鼠标悬停图片遮罩特效</title> <
鼠标移入显示遮罩层
weixin_44509418的博客
10-05 1960
css鼠标移入元素在上方显示遮罩层到底是怎么做的呢？今天就由我来为大家解答这个问题，在这里我用两种方法来写一下，有需要的小伙伴记得收藏，以备不时之需… 第一种方法： 第一种方法就是给需要遮罩层的元素同级再添加一个元素来达到这样的效果，让我们看一下代码怎么写： html代码： <div class="box"> <a href="http://materials.windfish.cn/jxy1-video.mp4" target="_blank">
css-鼠标移入出现遮罩层样式
xxuxioxx的博客
01-18 618
鼠标移入出现遮罩层样式
#css# 【四】实现鼠标移入图片显示遮罩层
ZHENGCHUNJUN的博客
07-08 1776
css 实现鼠标移入图片显示遮罩层
css鼠标悬停遮罩动画
05-16
鼠标悬停遮罩动画是指当鼠标悬停在某个元素上时，会出现一个遮罩层并且该元素会有相应的动画效果。一般情况下，鼠标悬停遮罩动画常用于图片展示、产品介绍等网站页面中。 实现鼠标悬停遮罩动画需要借助CSS的伪类选择器:hover和CSS3的过渡效果transition。通过:hover伪类选择器来控制鼠标悬停时的样式，同时使用transition来实现过渡效果。 具体实现步骤： 1. 首先，为需要添加鼠标悬停遮罩动画的元素设置position:relative;属性； 2. 然后，为该元素添加一个遮罩层，一般使用::before或::after伪元素来实现。同时设置该遮罩层的宽高、背景颜色、透明度等样式； 3. 最后，使用:hover伪类选择器来设置鼠标悬停时该元素及其遮罩层的样式，并使用transition来实现过渡效果。 下面是一段CSS代码示例： ``` .box { position: relative; width: 200px; height: 200px; } .box::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); opacity: 0; transition: opacity .5s ease-in-out; } .box:hover::before { opacity: 1; } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值