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

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

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



  
    

持续学习,向阳生长啊

_______________________分割线__________________________

介绍两种方法

1.js实现

2.css实现

 

先说js实现

1.将图片设置为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中,要显示的标题作为自己新建的属性加入

 

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的内容。

 

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

 

你可能感兴趣的:(前端)