鼠标悬停图片、文字css3效果

简介其实这样的效果也很常见,但是我平时用到很少,在其他网站看到这样的效果,第一反应就是查看源代码,看他怎么运用的,结果用了很多的div,最主要的是用js来实现。目前很多浏览器也都兼容css3新属性,这个例子就可以使用rgba(0,0,0,0.5)、opacity、当然关键也要看怎么定位,还是会用到position属性。
其实这样的效果也很常见,但是我平时用到很少,在其他网站看到这样的效果,第一反应就是查看源代码,看他怎么运用的,结果用了很多的div,最主要的是用js来实现。目前很多浏览器也都兼容css3新属性,这个例子就可以使用rgba(0,0,0,0.5)、opacity、当然关键也要看怎么定位,还是会用到position属性。

演示地址

如何实现鼠标悬停图片、文字效果

Html:

1、鼠标悬停图片变大文字消失

2、鼠标悬停文字出现

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; }

  1. 云中君说道:

    图片挂了!

  2. 夏日博客说道:

    图片都不显示了。 :exclaim:

    1. 迷惘旅人说道:

      别家偷来的,回头有空再编辑了。

  3. txh说道:

    :idea: good design

发表评论

电子邮件地址不会被公开。 必填项已用*标注