css3实现图片介绍滑动展示效果
css代码
#info{ width:760px; margin:0 auto;} .wrap a {display:block; width:220px; height:330px; text-decoration:none; color:#000;} .wrap {width:220px; height:330px; position:relative; overflow:hidden; font-family:arial, sans-serif; border:0; margin:0 10px; float:left; display:inline;} .wrap img {border:0;width:220px;height:330px; } .wrap i {display:block; width:220px; height:330px; position:absolute; left:0; top:300px; z-index:1; background:#000; filter: alpha(opacity=40); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40); opacity:0.40; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; } .wrap p {display:block; width:220px; height:330px; position:absolute; left:0; top:300px; z-index:1; background:transparent; font-size:12px; color:#fff; padding:0; margin:0; line-height:16px; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; } .wrap p b {display:block; font-size:22px; color:#fc0; text-align:center; margin:0; padding:0; line-height:30px;} .wrap p span {display:block; padding:10px; line-height:20px;} .wrap a:hover {direction:ltr;} .wrap a:hover i {top:0;} .wrap a:hover p {top:0;}
html代码
<div id="info" class="clearfix"> <div class="wrap"> <a href="#x"> <img src="../../images/1.jpg"> <i></i> <p> <b>Red Eye Frog</b> <span>Red-eyed tree frogs, as their name states, have bold red eyes with vertically narrowed pupils, a vibrant green body with yellow and blue striped sides, and orange toes. There is a great deal of regional variation in flank and thigh coloration.<br><br> Although it has been suggested that A. callidryas' bright colors function as aposematic or sexual signals, neither of these hypotheses have been confirmed.</span> </p> </a> </div> <div class="wrap"> <a href="#x"> <img src="../../images/2.jpg"> <i></i> <p> <b>Emperor Penguin</b> <span>The Emperor Penguin (Aptenodytes forsteri) is the tallest and heaviest of all living penguin species and is endemic to Antarctica.<br><br> The male and female are similar in plumage and size, reaching 122 cm (48 in) in height and weighing anywhere from 22.37 kg (48.82 lb). The dorsal parts are black and sharply delineated from the white belly, pale-yellow breast and bright-yellow ear patches. </span> </p> </a> </div><div class="wrap"> <a href="#x"> <img src="../../images/3.jpg" > <i></i> <p> <b>Pelicans</b> <span>A pelican is a large water bird with a distinctive pouch under the beak, belonging to the bird family Pelecanidae.<br><br> Along with the darters, cormorants, gannets, boobies, frigatebirds, and tropicbirds, pelicans make up the order Pelecaniformes. Modern pelicans are found on all continents except Antarctica. </span> </p> </a> </div> </div>
转载请注明:css3实现图片介绍滑动展示效果 - 编程知识库
您可能还会对这些文章感兴趣
2016-12-16 579次前端开发HTML5本地存储总结
前端开发中,我们经常接触到浏览器,谈到浏览器,自然会想到有些页面之间是怎么共享数据的,怎么保存数据的,今天就来解决这个用户痛点。SessionStorage, LocalStorage, Cookie这三者都可以被用来在浏览器端存储数据,而且都是字符串类型的键值对!。 区别在于前两者...
2016-12-15 1,292次HTML5画出五星红旗
源码: <!DOCTYPE html> <html> <head> <meta charset=”gbk”> <title>中国标准国旗</title> </head> <body> <canvas id=”canvas” width=”600″ height=”400″&g...
2015-04-30 3,576次css3实现图片比例缩放,左右垂直居中显示
实现图片在指定容器内等比例缩放,并控制中上下左右居中,以前可以通过javascript 加css2 的办法来控制。 随着css3的普及,现在介绍一种单纯通过css来进行控制。 <!html> <head> <meta charset="utf-8"> <title> css3 图片等...
2014-11-28 4,464次css3几何图形、多边图形shape研究
前言 估计大家在日常工作中都会用到css形状,但是目前天朝中使用到最多的估计就是圆(circle)、椭圆(ellipse)、各种三角形形状,但是你肯定很少看见过用几何图形或者多边图形。假如你不懂什么叫做几何图形,那么请前往百度百科,就算是我们用:after :before 这些...
大家正在看
- linux 系统中Mysql 进程占用cpu过高的解决
- 二类电商是什么意思? 二类电商有哪些?暴利二类电商还好做吗?
- 【二类电商广点通投放指南】二类电商广点通投放值不值
- 密码保护:支付宝突破微信封锁唤起支付宝代码
- Host is not allowed to connect to this MySQL server解决方法
- 密码保护:移动端js自动复制代码
- linux数据库调优,WordPress MySQL占用cpu高数据库优化
- 2017 年十大网页设计趋势
- 网页端的VR实现离我们还远么?
- 最完整的Chrome浏览器客户端调试大全
- iPhone用户人均每天遭电话骚扰1次
- 3G电子化销售服务系统
- Java WeakReference的理解与使用
- 搞清楚 Python traceback