以下是 jq+css3悬停效果 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<title>jq+css3悬停效果</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style_common.css" />
<link rel="stylesheet" type="text/css" href="css/style1.css" />
<!--<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css' />-->
</head>
<body>
<div class="container">
<h1>jquery+css3缩略图悬停效果</h1>
<div class="more">
<ul>
<li class="selected"><a href="index.html">Demo 1</a></li>
<li><a href="index2.html">Demo 2</a></li>
<li><a href="index3.html">Demo 3</a></li>
<li><a href="index4.html">Demo 4</a></li>
<li><a href="index5.html">Demo 5</a></li>
<li><a href="index6.html">Demo 6</a></li>
<li><a href="index7.html">Demo 7</a></li>
<li><a href="index8.html">Demo 8</a></li>
<li><a href="index9.html">Demo 9</a></li>
<li><a href="index10.html">Demo 10</a></li>
</ul>
</div>
<div class="main">
<div class="view view-first">
<img src="images/1.jpg" />
<div class="mask">
<h2>Hover Style #1</h2>
<p>A wonderful serenity has taken possession of my
entire soul, like these sweet mornings of spring which I
enjoy with my whole heart.</p>
<a href="#" class="info">Read More</a>
</div>
</div>
<div class="view view-first">
<img src="images/2.jpg" />
<div class="mask">
<h2>Hover Style #1</h2>
<p>A wonderful serenity has taken possession of my
entire soul, like these sweet mornings of spring which I
enjoy with my whole heart.</p>
<a href="#" class="info">Read More</a>
</div>
</div>
<div class="view view-first">
<img src="images/3.jpg" />
<div class="mask">
<h2>Hover Style #1</h2>
<p>A wonderful serenity has taken possession of my
entire soul, like these sweet mornings of spring which I
enjoy with my whole heart.</p>
<a href="#" class="info">Read More</a>
</div>
</div>
<div class="view view-first">
<img src="images/4.jpg" />
<div class="mask">
<h2>Hover Style #1</h2>
<p>A wonderful serenity has taken possession of my
entire soul, like these sweet mornings of spring which I
enjoy with my whole heart.</p>
<a href="#" class="info">Read More</a>
</div>
</div>
</div>
</div>
</body>
</html>
HTML代码(index2.html):
<!DOCTYPE html>
<html lang="en">
<head>
<title>jq+css3悬停效果</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style_common.css" />
<link rel="stylesheet" type="text/css" href="css/style2.css" />
<!--<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css' />-->
</head>
<body>
<div class="container">
<h1>jquery+css3缩略图悬停效果</h1>
<div class="more">
<ul>
<li><a href="index.html">Demo 1</a></li>
<li class="selected"><a href="index2.html">Demo 2</a></li>
<li><a href="index3.html">Demo 3</a></li>
<li><a href="index4.html">Demo 4</a></li>
<li><a href="index5.html">Demo 5</a></li>
<li><a href="index6.html">Demo 6</a></li>
<li><a href="index7.html">Demo 7</a></li>
<li><a href="index8.html">Demo 8</a></li>
<li><a href="index9.html">Demo 9</a></li>
<li><a href="index10.html">Demo 10</a></li>
</ul>
</div>
<div class="main">
<!-- SECOND EXAMPLE -->
<div class="view view-second">
<img src="images/5.jpg" />
<div class="mask"></div>
<div class="content">
<h2>Hover Style #2</h2>
<p>A wonderful serenity has taken possession of my
entire soul, like these sweet mornings of spring which I
enjoy with my whole heart.</p>
<a href="#" class="info">Read More</a>
</div>
</div>
<div class="view view-second">
<img src="images/6.jpg" />
<div class="mask"></div>
<div class="content">
<h2>Hover Style #2</h2>
<p>A wonderful serenity has taken possession of my
entire soul, like these sweet mornings of spring which I
enjoy with my whole heart.</p>
<a href="#" class="info">Read More</a>
</div>
</div>
<div class="view view-second">
<img src="images/7.jpg" />
<div class="mask"></div>
<div class="content">
<h2>Hover Style #2</h2>
<p>A wonderful serenity has taken possession of my
entire soul, like these sweet mornings of spring which I
enjoy with my whole heart.</p>
<a href="#" class="info">Read More</a>
</div>
</div>
<div class="view view-second">
<img src="images/8.jpg" />
<div class="mask"></div>
<div class="content">
<h2>Hover Style #2</h2>
<p>A wonderful serenity has taken possession of my
entire soul, like these sweet mornings of spring which I
enjoy with my whole heart.</p>
<a href="#" class="info">Read More</a>
</div>
</div>
</div>
</div>
</body>
</html>
CSS代码(demo.css):
@import url('reset.css');/* General Demo Style */
body{background:#f9f9f9 url(../images/white_texture.jpg) repeat top left;color:#333;font-family:'Oswald',Arial,sans-serif;font-size:13px;}
.container{position:relative;}
a{color:#fff;text-decoration:none;}
.clr{clear:both;}
.main{position:relative;width:680px;margin:0 auto;}
h1{margin:0px;padding:20px 20px 10px 20px;font-size:34px;color:#333;text-shadow:1px 1px 1px #fff;text-align:left;font-weight:400;text-align:center;}
h1 span{display:block;font-size:14px;font-family:Georgia,serif;font-style:italic;color:#b2891b;padding-top:10px;}
/* Header Style */
.header{font-family:'Arial Narrow',Arial,sans-serif;line-height:24px;font-size:11px;background:#000;opacity:0.9;text-transform:uppercase;z-index:9999;position:relative;-moz-box-shadow:1px 0px 2px #000;-webkit-box-shadow:1px 0px 2px #000;box-shadow:1px 0px 2px #000;}
.header a{padding:0px 10px;letter-spacing:1px;color:#ddd;display:block;float:left;}
.header a:hover{color:#fff;}
.header span.right{float:right;}
.header span.right a{float:none;display:inline;}
.more{position:relative;clear:both;font-family:'Arial Narrow',Arial,sans-serif;text-transform:uppercase;font-size:11px;padding:5px 0px 10px;width:540px;margin:0 auto;}
.more ul{display:block;text-align:center;height:30px;}
.more ul li{display:block;padding:4px 2px;float:left;}
.more ul li.selected a,.more ul li.selected a:hover{background:#b2891b;color:#fff;text-shadow:none;}
.more ul li a{color:#555;float:left;background:#fff;width:40px;padding:2px 5px;-moz-box-shadow:1px 1px 2px #aaa;-webkit-box-shadow:1px 1px 2px #aaa;box-shadow:1px 1px 2px #aaa;}
.more ul li a:hover{background:#000;color:#fff;}
CSS代码(reset.css):
/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
html,body{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
input{border:1px solid #b0b0b0;padding:3px 5px 4px;color:#979797;width:190px;}
address,caption,cite,code,dfn,th,var{font-style:normal;font-weight:normal;}
ol,ul{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym{border:0;}
CSS代码(style1.css):
.view-first img{-webkit-transition:all 0.2s linear;-moz-transition:all 0.2s linear;-o-transition:all 0.2s linear;-ms-transition:all 0.2s linear;transition:all 0.2s linear;}
.view-first .mask{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);opacity:0;background-color:rgba(219,127,8,0.7);-webkit-transition:all 0.4s ease-in-out;-moz-transition:all 0.4s ease-in-out;-o-transition:all 0.4s ease-in-out;-ms-transition:all 0.4s ease-in-out;transition:all 0.4s ease-in-out;}
.view-first h2{-webkit-transform:translateY(-100px);-moz-transform:translateY(-100px);-o-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);opacity:0;-webkit-transition:all 0.2s ease-in-out;-moz-transition:all 0.2s ease-in-out;-o-transition:all 0.2s ease-in-out;-ms-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}
.view-first p{-webkit-transform:translateY(100px);-moz-transform:translateY(100px);-o-transform:translateY(100px);-ms-transform:translateY(100px);transform:translateY(100px);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);opacity:0;-webkit-transition:all 0.2s linear;-moz-transition:all 0.2s linear;-o-transition:all 0.2s linear;-ms-transition:all 0.2s linear;transition:all 0.2s linear;}
.view-first:hover img{-webkit-transform:scale(1.1,1.1);-moz-transform:scale(1.1,1.1);-o-transform:scale(1.1,1.1);-ms-transform:scale(1.1,1.1);transform:scale(1.1,1.1);}
.view-first a.info{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);opacity:0;-webkit-transition:all 0.2s ease-in-out;-moz-transition:all 0.2s ease-in-out;-o-transition:all 0.2s ease-in-out;-ms-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}
.view-first:hover .mask{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter:alpha(opacity=100);opacity:1;}
.view-first:hover h2,.view-first:hover p,.view-first:hover a.info{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter:alpha(opacity=100);opacity:1;-webkit-transform:translateY(0px);-moz-transform:translateY(0px);-o-transform:translateY(0px);-ms-transform:translateY(0px);transform:translateY(0px);}
.view-first:hover p{-webkit-transition-delay:0.1s;-moz-transition-delay:0.1s;-o-transition-delay:0.1s;-ms-transition-delay:0.1s;transition-delay:0.1s;}
.view-first:hover a.info{-webkit-transition-delay:0.2s;-moz-transition-delay:0.2s;-o-transition-delay:0.2s;-ms-transition-delay:0.2s;transition-delay:0.2s;}
CSS代码(style_common.css):
.view{width:300px;height:200px;margin:10px;float:left;border:10px solid #fff;overflow:hidden;position:relative;text-align:center;-webkit-box-shadow:1px 1px 2px #e6e6e6;-moz-box-shadow:1px 1px 2px #e6e6e6;box-shadow:1px 1px 2px #e6e6e6;cursor:default;background:#fff url(../images/bgimg.jpg) no-repeat center center;}
.view .mask,.view .content{width:300px;height:200px;position:absolute;overflow:hidden;top:0;left:0;}
.view img{display:block;position:relative;}
.view h2{text-transform:uppercase;color:#fff;text-align:center;position:relative;font-size:17px;padding:10px;background:rgba(0,0,0,0.8);margin:20px 0 0 0;}
.view p{font-family:Georgia,serif;font-style:italic;font-size:12px;position:relative;color:#fff;padding:10px 20px 20px;text-align:center;}
.view a.info{display:inline-block;text-decoration:none;padding:7px 14px;background:#000;color:#fff;text-transform:uppercase;-webkit-box-shadow:0 0 1px #000;-moz-box-shadow:0 0 1px #000;box-shadow:0 0 1px #000;}
.view a.info:hover{-webkit-box-shadow:0 0 5px #000;-moz-box-shadow:0 0 5px #000;box-shadow:0 0 5px #000;}
分享到QQ
分享到微博
微信扫一扫
