<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3鼠标hover图片遮罩层动画效果</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="htmleaf-container">
<header class="htmleaf-header">
<h1>CSS3鼠标hover图片遮罩层动画效果 <span>Transparent Image Hover Overlay With Pure CSS3</span></h1>
<div class="htmleaf-links">
<a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.jb51.net/" title="脚本之家" target="_blank"><span> 脚本之家</span></a>
<a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.jb51.net/" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
</div>
</header>
<div class="media">
<img class="media__image" src="img/animals.jpg" alt="" />
<div class="media__body">
<h2>Cool Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt laboriosam voluptatem necessitatibus cum, tenetur repellat, eaque eos debitis! Quaerat.</p>
</div>
</div>
<div class="media">
<img class="media__image" src="img/technics.jpg" alt="" />
<div class="media__body">
<h2>Cool Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt laboriosam voluptatem necessitatibus cum, tenetur repellat, eaque eos debitis! Quaerat.</p>
</div>
</div>
<div class="media">
<img class="media__image" src="img/transport.jpg" alt="" />
<div class="media__body">
<h2>Cool Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt laboriosam voluptatem necessitatibus cum, tenetur repellat, eaque eos debitis! Quaerat.</p>
</div>
</div>
<div class="media">
<img class="media__image" src="img/fashion.jpg" alt="" />
<div class="media__body">
<h2>Cool Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt laboriosam voluptatem necessitatibus cum, tenetur repellat, eaque eos debitis! Quaerat.</p>
</div>
</div>
<div class="media">
<img class="media__image" src="img/people.jpg" alt="" />
<div class="media__body">
<h2>Cool Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt laboriosam voluptatem necessitatibus cum, tenetur repellat, eaque eos debitis! Quaerat.</p>
</div>
</div>
<div class="media">
<img class="media__image" src="img/sports.jpg" alt="" />
<div class="media__body">
<h2>Cool Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt laboriosam voluptatem necessitatibus cum, tenetur repellat, eaque eos debitis! Quaerat.</p>
</div>
</div>
</div>
</body>
</html>
CSS3鼠标hover图片遮罩层文字动画特效.zip （17个子文件） 
132689849202941346 CSS3_hoverwz css 
htmleaf-demo.css 6KB style.css 2KB normalize.css 2KB related 
2.jpg 34KB 1.jpg 28KB img transport.jpg 19KB sports.jpg 12KB technics.jpg 12KB animals.jpg 27KB fashion.jpg 18KB people.jpg 24KB fonts icomoon.woff 1KB
icomoon.svg 2KB icomoon.eot 2KB icomoon.ttf 1KB
index.html 3KB scss style.scss 1KB资源评论
