1.html

<div class="div1">
  <div class="div11">
  <p >Dolor nunc vule putateulr<br/><br/>March 23rd, 2015 5 Comments
  <br/><br/>Praesent vestim molestie lacus. Aenean nonummy hendrerit mauris. Phasellus porta.
  Fusce suscipit varius mi. Cum sociis natoque penatibus et magnis dis parturient montes,
  nascetur ridiculus mus.
  </p>
  </div>
 </div>  

2.css设置实现功能。(父级元素设置相对定位,子元素绝对定位(子绝对,父相对))

.div1,.div2,.div3{float:left;margin:0 20px 0 25px;overflow:hidden;position:relative;}

.div1{width:350px;height:260px;background:url("images/img10.jpg");}
.div1>.div11{width:350px;height:260px;position:absolute;left:0px;top:232px;background:cyan;opacity:0.7;transition:1s linear;}
.center-wen>.div1:hover .div11{top:0;}

3.效果

鼠标hover图片时遮罩层匀速上升显示内容top、定位的更多相关文章

  1. 通过使用CSS字体阴影效果解决hover图片时显示文字看不清的问题

    1.前言 最近需要加入一个小功能,在鼠标越过图片时,提示其大小和分辨率,而不想用增加属性title来提醒,不够好看.然而发现如果文字是一种颜色,然后总有概率碰到那张图上浮一层的文字会看不到,所以加入文 ...

  2. CSS3实现鼠标经过图片时图片放大

    在鼠标经过图片时,图片被放大,而且还有个过渡的效果.... <!DOCTYPE html> <html> <head> <link href="cs ...

  3. 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结

    史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...

  4. 非一屏页面,出现遮罩层页面位置不动,并且遮罩层一屏显示。(pc,移动端都适用的方法)

    首先展示页面效果: 遮罩没出现的页面张酱紫:页面在楼层二这个位置. 遮罩显示:后面页面页面任停留在当前浏览位置,滚动条并未回顶部 下面来说说写法: css: 页面具体布局样式......(此处省略无数 ...

  5. Jquery实现鼠标hover图片遮罩弹出提示层特效

    1.引入JS文件和所需要的样式文件 2.简单的写上以下18行代码就可以实现了 $(document).ready(function() { $("div.tip_trigger a.img& ...

  6. 鼠标经过图片时变换的两种方法--css+div及javascript应用

    javascript方式:    熟悉使用document.getElementById()取得节点对象 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTM ...

  7. 鼠标悬浮图片时弹出透明提示图层的jQuery特效

    源码: <!doctype html> <html class="no-js" lang="en"> <head> < ...

  8. 有时候做JQ动画,鼠标经过,它会不停自己抖动不停,解决方法(此处,是兼容IE ,当鼠标经过,遮罩层从下移到上边的JQ动画效果)

    <style> .x_sdbb { margin: 60px 0 40px 0; } .x_title2{ background: url(../images/hdb_img17.png) ...

  9. 自写图片遮罩层放大功能jquery插件源代码,photobox.js 1.0版,不兼容IE6

    阿嚏~~~ 话说本屌丝没啥开发插件的经验,可是天公不作美,公司须要让我自己开发个图片放大的插件 但公司老大的话,宛如吾皇之圣旨,微臣必当肝脑涂地,莫敢不从啊~~~ 于是乎,作为一个超级小白,本人仅仅能 ...

随机推荐

  1. python函数后面有多个括号怎么理解?

    一般而言,函数后面只有一个括号.如果看见括号后还有一个括号,说明第一个函数返回了一个函数,如果后面还有括号,说明前面那个也返回了一个函数.以此类推. 比如fun()() def fun(): prin ...

  2. file_list(path):遍历文件列表[python]

    import os def __file_list__(path, level): files = os.listdir(path); for i in files: path_tmp = path ...

  3. Ubuntu 使用 Android Studio 编译 TensorFlow android demo

    https://www.cnblogs.com/dyufei/p/8028218.html https://www.myboxlab.com/topic/detail/714ca2d405414f13 ...

  4. Java -cp 命令行引用多个jar包的简单写法(Windows、Linux

    1.Windows下用法 在Windows上,可以使用 用法:java your-jar-lib-folder/* your-main-class your-jar-lib-folder为存放一堆ja ...

  5. 中国各省市县级 JSON 文件

    参考链接:https://blog.csdn.net/lzhlzz/article/details/41347929

  6. Android Studio buildGrade文件注解

    apply plugin: 'com.android.application' //指定用的那个插件,android App插件打包得到.apk文件                     //com ...

  7. POJ 3253 Fence Repair (贪心)

    题意:将一块木板切成N块,长度分别为:a1,a2,……an,每次切割木板的开销为当前木板的长度.求出按照要求将木板切割完毕后的最小开销. 思路:比较奇特的贪心 每次切割都会将当前木板一分为二,可以按切 ...

  8. Nginx系列1:ubuntu16.04编译出适合自己的nginx服务器

    1.下载nginx nginx官网:nginx.org tar.gz文件 解压缩命令: wget https://nginx.org/download/nginx-1.14.2.tar.gz #下载n ...

  9. nginx 端口映射多个应用

    nginx端口映射多个应用,应用中的静态资源路径尽量是写相对路径 server { listen 8000; location / { proxy_pass http://10.1.166.216:9 ...

  10. MySQL用source命令导入不记入binlog中【原创】

    试验环境,MySQL主主复制 主库10.72.16.112 从库10.72.16.50 一直有个疑问,利用sql_log_bin=0可以临时在客户端停止将操作记入binlog中,如果使用source命 ...