图片覆盖层

代码储存在Github
效果预览

初衷:很多人在初学前端的时候都会问,“如何入门前端?”
同为在前端学习道路上,奋力追赶的一员,本人对于目前网络上所能看到的 “入门级” 的教材并不太满意。学习一门新知识,实例是尤其重要的。在这里本人整理了目前页面上常见功能实现的具体实例。愿能为大家提供一些帮助。
希望能够与大家互相分享,共同进步。

效果预览
图片描述

HTML 部分

    <h2>图片覆盖层</h2>

    <select id="mySelect">
        <option value="overlayFadeIn">渐显</option>
        <option value="overlaySlideInTop">从上滑入</option>
        <option value="overlaySlideInBottom">从下滑入</option>
        <option value="overlaySlideInRight">从右滑入</option>
        <option value="overlaySlideInLeft">从左滑入</option>
    </select>

    <div class="container">
      <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image">
      <div class="overlayFadeIn" id="overlay">
        <div class="text">Hello World</div>
      </div>
    </div>

CSS 部分

#mySelect {
  font-size: 16px;
  text-align: center;
}

.container {
  position: relative;
  width: 30%;
}

.image {
  display: block;
  width: 100%;
}

.overlayFadeIn {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #008CBA;
}

.container:hover .overlayFadeIn {
  opacity: 1;
}

.overlaySlideInTop {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 100%;
  height:0;
  transition: .5s ease;
}

.container:hover .overlaySlideInTop {
  bottom: 0;
  height: 100%;
}

.overlaySlideInBottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
}

.container:hover .overlaySlideInBottom {
  height: 100%;
}

.overlaySlideInRight {
  position: absolute;
  bottom: 0;
  left: 100%;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 0;
  height: 100%;
  transition: .5s ease;
}

.container:hover .overlaySlideInRight {
  width: 100%;
  left: 0;
}

.overlaySlideInLeft {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 0;
  height: 100%;
  transition: .5s ease;
}

.container:hover .overlaySlideInLeft {
  width: 100%;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  white-space: nowrap;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

JavaScript 部分

这部分代码只为展示方便而用,不需考虑。

(function() {
    var mySelect = document.getElementById('mySelect');
        overlay = document.getElementById('overlay');

    mySelect.onchange = function(e) {
        overlay.className = e.target.value;
    }
})();

好啦,现在所有的代码都写完啦!

赶快打开浏览器,看看效果吧!

在这里,只是给大家提供一种思路,参考。
具体的实现,每个人都可以有不同的方法。
请大家赶快发挥想象,把你最想实现的功能,在电脑敲出来吧!

参考自w3cschools


Garrik_刘翔
103 声望31 粉丝

待业前端新人