js和css两种实现鼠标经过图片时显示透明框的遮罩条文字-动画

最新推荐文章于 2024-04-12 08:36:36 发布

一只自由的程序媛

最新推荐文章于 2024-04-12 08:36:36 发布

阅读量8.2k

点赞数 6

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_37719279/article/details/79105170

版权

前端专栏收录该内容

25 篇文章 1 订阅

订阅专栏

果然是年少无知的我呀, 这么简单的东西竟然还需要JS实现??

鉴于还有人能看到我的陈年博客, 遂改之

<!DOCTYPE html>
<html>
  <body>
    <div class="img-container">
      <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3886046484,1228904201&fm=26&gp=0.jpg" />
      <p class="desc">持续学习,向阳生长啊</p>
    </div>
  </body>
  <style>
    .img-container {
      position: relative;
      background: red;
      width: 200px;
      height: 130px;
    }
    .img-container img {
      width: 100%;
      /*   height:auto; */
      max-height: 100%;
    }
    .img-container:hover .desc {
      display: block;
    }
    .img-container .desc {
      display: none;
      position: absolute;
      margin: 0;
      bottom: 0;
      width: 100%;
      height: 40px;
      line-height: 40px;
      text-align: center;
      background-color: rgba(0,0,0,0.3);
      color: #fff;
      animation: hideIndex 0.5s;
    }
    @keyframes hideIndex {
        0%{
            /* bottom: -40px; */
            opacity: 0;
        }
        100%{
            /* bottom: 0; */
            opacity: 1;
        }
    }
  </style>
</html>

_______________________分割线__________________________

介绍两种方法

1.js实现

2.css实现

先说js实现

1.将图片设置为div的背景，鼠标移动到上面的时候触发事件，代码如下

<div class="img" onmouseover="play(this)" onmouseout="playout(this)">
    <p>美丽的三亚</p>
</div>

2.中间文字p的css样式，display设置为none，不显示，鼠标移动到上面时才显示

.img p{
            position: absolute;
            bottom: 0;
            text-align: center;
            background-color: white;
            opacity: 0.3;
            width:500px;
            height:40px;
            line-height: 40px;
            display: none;
            color: black;
        }

3.js代码，很简单的两个函数

function play(obj) {
    var play = obj.getElementsByTagName("p")[0];
    play.style.display = "block";
}

function playout(obj) {
    var play = obj.getElementsByTagName("p")[0];
    play.style.display = "none";
}

没有实现缓动的效果，有缺陷

下面说css实现

1.图片作为元素加入div中，要显示的标题作为自己新建的属性加入

<div class="mask" data-title="美丽的三亚">
<img src="2.jpg">
</div>

2.css代码如下

 .mask{
            position: relative;
            width:400px;
            height:300px;
            overflow: hidden;
        }
        .mask:after{
            content: attr(data-title);
            position: absolute;
            width:100%;
            top:100%;
            left:0;
            padding: 0.7em 0;
            text-align: center;
            color: #fff;
            background-color: rgba(52,47,41,.5);
            -webkit-transition:all .3s ease-in-out;
            transition:all .3s ease-in-out;
            opacity: 0;
        }
        .mask:hover:after{
            opacity: 1;
            -webkit-transform:translate(0,-100%);
            transform:translate(0,-100%);
        }

鼠标移动到图片的时候，显示一个透明度为0的背景色为（52,47,41）的方框，里面的内容就是data-title的内容。

而且实现了一个缓动渐进的效果

一只自由的程序媛

关注

6
点赞
踩
35

收藏

觉得还不错? 一键收藏
3
评论
js和css两种实现鼠标经过图片时显示透明框的遮罩条文字-动画

介绍两种方法1.js实现2.css实现先说js实现1.将图片设置为div的背景，鼠标移动到上面的时候触发事件，代码如下美丽的三亚2.中间文字p的css样式，display设置为none，不显示，鼠标移动到上面时才显示.img p{ position: absolute; bottom: 0;
复制链接

扫一扫