您现在的位置是:首页 > 博客网站制作 > 心得笔记心得笔记
鼠标悬停图片、文字css3效果
杨青2014-01-14【心得笔记】人已围观
简介其实这样的效果也很常见,但是我平时用到很少,在其他网站看到这样的效果,第一反应就是查看源代码,看他怎么运用的,结果用了很多的div,最主要的是用js来实现。目前很多浏览器也都兼容css3新属性,这个例子就可以使用rgba(0,0,0,0.5)、opacity、当然关键也要看怎么定位,还是会用到position属性。
其实这样的效果也很常见,但是我平时用到很少,在其他网站看到这样的效果,第一反应就是查看源代码,看他怎么运用的,结果用了很多的div,最主要的是用js来实现。目前很多浏览器也都兼容css3新属性,这个例子就可以使用rgba(0,0,0,0.5)、opacity、当然关键也要看怎么定位,还是会用到position属性。
演示地址
Html:
<div>
<h2>1、鼠标悬停图片变大文字消失</h2>
<ul class="ex01">
<li><a href="/" ><img src="images/1.jpg"><span>鼠标悬停</span></a></li>
<li><a href="/" ><img src="images/2.jpg"><span>鼠标悬停</span></a></li>
<li><a href="/"><img src="images/3.jpg"><span>鼠标悬停</span></a></li>
<li><a href="/" ><img src="images/4.jpg"><span>鼠标悬停</span></a></li>
</ul>
<h2>2、鼠标悬停文字出现</h2>
<ul class="ex02">
<li><a href="/" ><img src="images/1.jpg"><span>鼠标悬停</span></a></li>
<li><a href="/"><img src="images/2.jpg"><span>鼠标悬停</span></a></li>
<li><a href="/"><img src="images/3.jpg"><span>鼠标悬停</span></a></li>
<li><a href="/"><img src="images/4.jpg"><span>鼠标悬停</span></a></li>
</ul>
</div>
CSS代码片段:
/* ex01 */
.ex01 li{ width:170px; float:left; margin:5px}
.ex01 li a { position:relative; display:block }
.ex01 li span{ position: absolute; left: 0px; bottom: 0px;color:#FFF; line-height:24px; display:block; width:170px; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; -ms-transition: all 0.5s; background:rgba(0,0,0,0.5); text-align:center}
.ex01 img { width: 170px; height: 120px; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; display:block}
.ex01 img:hover { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); }
.ex01 li:hover span{ opacity:0}
/* ex02 */
.ex02 li{width:170px;margin:5px;float:left;}
.ex02 li img{width: 170px; height: 120px;display:block;}
.ex02 li span{ opacity:0}
.ex02 li:hover span{ opacity:1}
.ex02 li a { position:relative; display:block }
.ex02 li span{ position: absolute; left: 0px; top: 0px; background:rgba(0,0,0,0.5); color:#FFF; line-height:24px; display:block; width:170px;text-align:center;-webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; -ms-transition: all 0.5s; }
很赞哦! ()
上一篇:IE常见bugs以及解决方案列表
下一篇:从摄影作品中获取网页颜色搭配技巧
相关文章
随机图文
网站变灰技巧 兼容IE,火狐,chrome浏览器
html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }使用方法:这段代码可以变网页为黑白,将代码加到CSS最顶端就可以实现素装。建议全国站长动起来。为在地震中遇难的同胞哀悼。杨青个人我们可以从CSS框架中借鉴到什么
现在很多人会使用 CSS 框架进行快速建站。那 CSS 框架是什么呢,它通常是一些 CSS 文件的集合,这些文件包括基本布局、表单样式、网格、简单组件、以及样式重置。使用 CSS 框架大大降低工作成本进行快速建站。
使用ASPCMS建站网站被黑
之前使用过aspcms建站,都使用的是最新发布的版本,时隔半年,竟然以将近每个月升一次的速度更新了n个版本。当然是一次比一次好,但是之前的版本,升级又非常麻烦,暂且就先没管。CSS简明教程(三)——css样式高级技巧
用div元素为网页在编写样式表时,我们经常要用div元素来包装内容:个div元素就是一个自然的容器,可以给它添加边框、边距和不同的背景颜色(或者背景图片)从而让它在页面中更加显眼。