以下是 15种CSS3图片Hover悬停效果代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,图片特效,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为15种CSS3图片Hover悬停效果代码，属于站长常用代码" />
<title>15种CSS3图片Hover悬停效果代码</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
</head>
<body>
<!-- 代码 开始 -->
<div class="container">
<div class="grid">
<figure class="effect-lily">
<img src="img/1.jpg" alt="img01"/>
<figcaption>
<h2>Nice <span>Lily</span></h2>
<p>Lily likes to play with crayons and pencils</p>
<a href="#" >View more</a>
</figcaption>
</figure>
<figure class="effect-sadie">
<img src="img/2.jpg" alt="img02"/>
<figcaption>
<h2>Holy <span>Sadie</span></h2>
<p>Sadie never took her eyes off me. <br>She had a dark soul.</p>
<a href="#" >View more</a>
</figcaption>
</figure>
<figure class="effect-honey">
<img src="img/7.jpg" alt="img07"/>
<figcaption>
<h2>Dreamy <span>Honey</span> <i>Now</i></h2>
<a href="#" >View more</a>
</figcaption>
</figure>
<figure class="effect-layla">
<img src="img/4.jpg" alt="img04"/>
<figcaption>
<h2>Crazy <span>Layla</span></h2>
<p>When Layla appears, she brings an eternal summer along.</p>
<a href="#" >View more</a>
</figcaption>
</figure>
<figure class="effect-zoe">
<img src="img/14.jpg" alt="img14"/>
<figcaption>
<h2>Creative <span>Zoe</span></h2>
<span class="icon-heart"></span>
<span class="icon-eye"></span>
<span class="icon-paper-clip"></span>
<p>Zoe never had the patience of her sisters. She deliberately punched the bear in his face.</p>
<a href="#" >View more</a>
</figcaption>
</figure>
<figure class="effect-oscar">
<img src="img/8.jpg" alt="img08"/>
<figcaption>
<h2>Warm <span>Oscar</span></h2>
<p>Oscar is a decent man. He used to clean porches with pleasure.</p>
<a href="#" >View more</a>
</figcaption>
</figure>
<figure class="effect-marley">
<img src="img/9.jpg" alt="img09"/>
<figcaption>
<h2>Sweet <span>Marley</span></h2>
<p>Marley tried to convince her but she was not interested.</p>
<a href="#" >View more</a>
</figcaption>
</figure>
<figure class="effect-ruby">
<img src="img/10.jpg" alt="img10"/>
<figcaption>
<h2>Glowing <span>Ruby</span></h2>
<p>Ruby did not need any help. Everybody knew that.</p>
<a href="#" >View more</a>
</figcaption>
</figure>
<figure class="effect-roxy">
<img src="img/3.jpg" alt="img03"/>
<figcaption>
<h2>Charming <span>Roxy</span></h2>
<p>Roxy was my best friend. She'd cross any border for me.</p>
<a href="#" >View more</a>
</figcaption>
</figure>
<figure class="effect-bubba">
<img src="img/6.jpg" alt="img06"/>
<figcaption>
<h2>Fresh <span>Bubba</span></h2>
<p>Bubba likes to appear out of thin air.</p>
<a href="#" >View more</a>
</figcaption>
</figure>
<figure class="effect-romeo">
<img src="img/5.jpg" alt="img05"/>
<figcaption>
<h2>Wild <span>Romeo</span></h2>
<p>Romeo never knows what he wants. He seemed to be very cross about something.</p>
<a href="#" >View more</a>
</figcaption>
</figure>
<figure class="effect-dexter">
<img src="img/12.jpg" alt="img12"/>
<figcaption>
<h2>Strange <span>Dexter</span></h2>
<p>Dexter had his own strange way. You could watch him training ants.</p>
<a href="#" >View more</a>
</figcaption>
</figure>
<figure class="effect-sarah">
<img src="img/13.jpg" alt="img13"/>
<figcaption>
<h2>Free <span>Sarah</span></h2>
<p>Sarah likes to watch clouds. She's quite depressed.</p>
<a href="#" >View more</a>
</figcaption>
</figure>
<figure class="effect-chico">
<img src="img/15.jpg" alt="img15"/>
<figcaption>
<h2>Silly <span>Chico</span></h2>
<p>Chico's main fear was missing the morning bus.</p>
<a href="#" >View more</a>
</figcaption>
</figure>
<figure class="effect-milo">
<img src="img/11.jpg" alt="img11"/>
<figcaption>
<h2>Faithful <span>Milo</span></h2>
<p>Milo went to the woods. He took a fun ride and never came back.</p>
<a href="#" >View more</a>
</figcaption>
</figure>
</div>
</div>
<!-- 代码 结束 -->
</body>
</html>
CSS代码(demo.css):
/* ����ͼ�� �Ѽ����� www.lanrentuku.com */
@font-face{font-weight:normal;font-style:normal;font-family:'codropsicons';src:url('../fonts/codropsicons/codropsicons.eot');src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),url('../fonts/codropsicons/codropsicons.woff') format('woff'),url('../fonts/codropsicons/codropsicons.ttf') format('truetype'),url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');}
*,*:after,*:before{border-box;box-sizing:border-box;}
.clearfix:before,.clearfix:after{content:'';display:table;}
.clearfix:after{clear:both;}
body{background:#f6f9fa;color:#536d76;font-weight:400;font-size:1em;font-family:'Raleway',Arial,sans-serif;}
a{color:#4f7f90;text-decoration:none;outline:none;}
a:hover,a:focus{color:#39545e;}
section{padding:1em;text-align:center;}
/* Header */
.codrops-header{margin:0 auto;padding:1em 1em;text-align:center;}
.codrops-header h1{margin:0;font-weight:800;font-size:4em;line-height:1.3;}
.codrops-header h1 span{display:block;padding:0 0 0 0.1em;font-size:45%;font-weight:300;color:#7e959d;}
/* To Navigation Style */
.codrops-top{width:100%;text-transform:uppercase;font-size:0.69em;line-height:2.2;}
.codrops-top a{display:inline-block;padding:0 1em;text-decoration:none;letter-spacing:1px;}
.codrops-top span.right{float:right;}
.codrops-top span.right a{display:block;float:left;}
.codrops-icon:before{margin:0 4px;text-transform:none;font-weight:normal;font-style:normal;font-variant:normal;font-family:'codropsicons';line-height:1;speak:none;-webkit-font-smoothing:antialiased;}
.codrops-icon-drop:before{content:"\e001";}
.codrops-icon-prev:before{content:"\e004";}
/* Related demos */
.related{padding:6em 1em;font-size:120%;}
.related > a{border:1px solid #4f7f90;display:inline-block;text-align:center;margin:20px 10px;padding:25px;}
.related a:hover{border-color:#39545e;}
.related a img{max-width:100%;opacity:0.8;}
.related a:hover img,.related a:active img{opacity:1;}
.related a h3{margin:0;padding:0.5em 0 0.3em;max-width:300px;text-align:left;}
@media screen and (max-width:25em){.codrops-header{font-size:75%;}
.codrops-icon span{display:none;}
}
CSS代码(normalize.css):
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}
audio,canvas,video{display:inline-block;}
audio:not([controls]){display:none;height:0;}
[hidden]{display:none;}
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}
body{margin:0;}
a:focus{outline:thin dotted;}
a:active,a:hover{outline:0;}
h1{font-size:2em;margin:0.67em 0;}
abbr[title]{border-bottom:1px dotted;}
b,strong{font-weight:bold;}
dfn{font-style:italic;}
hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}
mark{background:#ff0;color:#000;}
code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}
pre{white-space:pre-wrap;}
q{quotes:"\201C" "\201D" "\2018" "\2019";}
small{font-size:80%;}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}
sup{top:-0.5em;}
sub{bottom:-0.25em;}
img{border:0;}
svg:not(:root){overflow:hidden;}
figure{margin:0;}
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}
legend{border:0;padding:0;}
button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}
button,input{line-height:normal;}
button,select{text-transform:none;}
button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}
button[disabled],html input[disabled]{cursor:default;}
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}
input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
textarea{overflow:auto;vertical-align:top;}
table{border-collapse:collapse;border-spacing:0;}
分享到QQ
分享到微博
微信扫一扫
