鼠标hover图片时遮罩层匀速上升显示内容top、定位

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.效果

时间： 2024-10-21 23:30:53

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

鼠标经过图片时出现半透明文字特效

鼠标经过图片时出现半透明文字的效果 以下是个很常见的图片显示特效,当鼠标经过图片时,图片上会浮动一个半透明的层,层内显示文字,同时图片的边框会变亮,效果很好. <html><head><meta http-equiv="Content-Type" content="text/html; charset=gbk" /><title>当鼠标经过图片时,出现半透明的文字</title><style type

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

在鼠标经过图片时,图片被放大,而且还有个过渡的效果.... 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <link href="css/prodInfo.css" rel="stylesheet" type="text/css"> 5 </head> 6 <style> 7 div img{ 8 border:1px soild red; 9

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

1.前言 最近需要加入一个小功能,在鼠标越过图片时,提示其大小和分辨率,而不想用增加属性title来提醒,不够好看.然而发现如果文字是一种颜色,然后总有概率碰到那张图上浮一层的文字会看不到,所以加入文字字体阴影效果来解决此问题. 2.例子说明 未加入字体阴影之前的效果 加入字体阴影的效果 如果没加入字体阴影的效果,左图会看不清哪些文字的,而右图没有多大区别. 3.相关代码 <div> <img alt="imageSample" style="width:1

下载文件时遮罩层示例。

新需求是在原来的代码上进行优化查询. 优化完成之后导出功能还是需要1~3秒响应时间,毕竟数据量大,业务逻辑也较为复杂. 为了避免用户重复点击“导出”按钮,故写个遮罩层来示意用户当前正在发送下载的请求. 点击导出或下载按钮弹出遮罩层,由于无法判断文件什么时候在后台读取完,遮罩层什么时候消失成了关键. 思路是这样的: 在请求到后台下载的Servlet时,往Session中setAttribute一个值. 前台页面写个定时器,不断请求另外一个Servlet获取Session中set的值,当值为空字符串

炫酷CSS3鼠标hover图片缩放和标题效果

这是一款使用纯CSS3制作的效果非常炫酷的鼠标滑过图片缩放和标题效果.该CSS3图片效果中图片的边框被制作为不停动画的护栏效果,当用鼠标滑过图片时,图片会有非常炫酷的动画效果. CSS3 animations是一个非常神奇的技术,相比于javascript和flash,它只用少量的代码就可以制作出平滑的动画效果.现在,所有的现代浏览器,包括IE9都支持CSS3 transitions 和 animations. 在线演示:http://www.htmleaf.com/Demo/201502081

artdialog 遮罩层 ie下显示一半

最近做项目用到artdialog这个js框架,但发先IE下遮罩层显示不全,研究了半天,在网上也没找到解决办法,自己研究了下源码,终于解决了. 改之前: 改之后: 修改方法: 找到源代码,将fixed改为absolute.

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

1.引入JS文件和所需要的样式文件 2.简单的写上以下18行代码就可以实现了 $(document).ready(function() { $("div.tip_trigger a.img").hover(function() { $(this).parent('div.tip_trigger').css({ 'background': '#8de08b', 'z-index': '1000' }); $('#h_coolsite .block').show(); tip = $(th

酷炫的鼠标滑过添加遮罩层效果

今天,没错又是今天,今天做的事情还真是多呢~还修了洗衣机,貌似除了写代码不行,样样都行了呢~ 好了,言归正传.今天在浏览一个网页时,鼠标滑过它的图片,出现了一种我感觉很酷炫的效果.像这样: 自己感受下~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style&

鼠标经过图片时向前突出并放大图片

/*.img1 img{transform: scale(1,1)原本的图片的大小; transition: all 0.6s;动画过渡的效果:全部的过渡效果 效果的时间是0.6秒 }*/ 第一句是没有经过图片的效果 /*.img1:hover img{transform: scale(2,2);}*/ 第二句就是当鼠标经过是图片放大的倍数 .img1 img{transform: scale(1,1); transition: all 0.6s; } .img1:hover img{trans