前端实例练习 - 图片覆盖层

feng409 发布于2019-08-01 16:29 / 3324人阅读

摘要：图片覆盖层代码储存在效果预览初衷很多人在初学前端的时候都会问，如何入门前端同为在前端学习道路上，奋力追赶的一员，本人对于目前网络上所能看到的入门级的教材并不太满意。在这里本人整理了目前页面上常见功能实现的具体实例。

图片覆盖层

代码储存在Github
效果预览

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

效果预览

HTML 部分

    图片覆盖层

    

    
      
      
        Hello World

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

GPU云服务器云服务器覆盖层html html图片覆盖图片 java图片覆盖文字 js 弹出层显示图片

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/50555.html

前端实例练习 - 图片覆盖层

摘要：图片覆盖层代码储存在效果预览初衷很多人在初学前端的时候都会问，如何入门前端同为在前端学习道路上，奋力追赶的一员，本人对于目前网络上所能看到的入门级的教材并不太满意。在这里本人整理了目前页面上常见功能实现的具体实例。图片覆盖层代码储存在Github效果预览初衷：很多人在初学前端的时候都会问，如何入门前端？同为在前端学习道路上，奋力追赶的一员，本人对于目前网络上所能看到的入门级的...

Freeman 2019-08-29 12:13 评论0 收藏0
前端实例练习 - 图片覆盖层

摘要：图片覆盖层代码储存在效果预览初衷很多人在初学前端的时候都会问，如何入门前端同为在前端学习道路上，奋力追赶的一员，本人对于目前网络上所能看到的入门级的教材并不太满意。在这里本人整理了目前页面上常见功能实现的具体实例。图片覆盖层代码储存在Github效果预览初衷：很多人在初学前端的时候都会问，如何入门前端？同为在前端学习道路上，奋力追赶的一员，本人对于目前网络上所能看到的入门级的...

meteor199 2019-08-20 15:06 评论0 收藏0
【CSS练习】IT修真院--练习5-护工个人界面

摘要：任务五一个最常见的移动端页面完成的事情学习张鑫旭世界相关章节张鑫旭系列了解通配符选择器性能优化浏览器渲染原理学习各属性及效果完成任务五学习编码规范编码规范并按照编码规范优化代码完成深度思考计划的事情找时间把前面任务的官方提供链接过一遍，查缺任务五、一个最常见的移动端页面完成的事情 float学习张鑫旭《CSS世界》相关章节张鑫旭 float系列了解CSS通配符 &...

Jonathan Shieber 2019-08-29 15:42 评论0 收藏0
【CSS练习】IT修真院--练习3-简单界面

摘要：任务三一个最简单的移动端页面今天完成的事情运用布局知识跟随设计图进行布局，完成简单并继续学习优化让布局更好适应屏幕变化使用了盒模型及百分比了解区别在中应用图片处理学习明天计划的事情深度思考手机分辨率和网页的区别周末补学任务四计划及简单编写遇任务三、一个最简单的移动端页面今天完成的事情运用布局知识跟随设计图进行布局，完成简单Demo并继续学习优化. 让布局更好适应屏幕变化(使用...

MrZONT 2019-08-29 15:36 评论0 收藏0
前端实例练习 - 模态图

摘要：模态图代码储存在效果预览初衷很多人在初学前端的时候都会问，如何入门前端同为在前端学习道路上，奋力追赶的一员，本人对于目前网络上所能看到的入门级的教材并不太满意。在这里本人整理了目前页面上常见功能实现的具体实例。模态图代码储存在Github效果预览初衷：很多人在初学前端的时候都会问，如何入门前端？同为在前端学习道路上，奋力追赶的一员，本人对于目前网络上所能看到的入门级的教材并不...

Turbo 2019-08-21 11:37 评论0 收藏0