Home > Article > Web Front-end > Image mask animation effect of sensor mouse_image special effects

Image mask animation effect of sensor mouse_image special effects

WBOYOriginal: 2016-05-16 18:17:09901browse

<title>Mouse sensing image mask animation effect</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css"> 
html, body, div,ul, li { 
margin: 0; 
padding: 0; 
} 
div.examples_body { 
width: 750px; 
margin: 0px auto; 
clear: both; 
overflow: hidden; 
} 
.bannerHolder { 
width: 726px; 
margin: 20px 0 15px 0; 
padding: 20px 10px 20px 10px; 
background-color: #f7f7f7; 
border: 1px solid #eee; 
overflow: hidden; 
-moz-border-radius:12px; 
-webkit-border-radius:12px; 
border-radius:12px; 
} 
.bannerHolder li { 
list-style: none; 
display: inline; 
} 
.banner { 
position: relative; 
width: 125px; 
height: 100px; 
overflow: hidden; 
float: left; 
display: inline; 
margin: 0 10px 
} 
.banner img { 
display: block; 
border: none; 
} 
.banner div { 
position: absolute; 
z-index: 100; 
background-color: #222; 
width: 60px; 
height: 60px; 
cursor: pointer; 
-moz-border-radius:100px; 
-webkit-border-radius:100px; 
border-radius:100px; 
} 
.banner .cornerTL { 
left:-63px; 
top:-63px; 
} 
.banner .cornerTR { 
right:-63px; 
top:-63px; 
} 
.banner .cornerBL { 
left:-63px; 
bottom:-63px; 
} 
.banner .cornerBR { 
right:-63px; 
bottom:-63px; 
} 
.banner p { 
display: none; 
left: 0; 
top: 57px; 
width: 100%; 
z-index: 200; 
position: absolute; 
font-family: Tahoma, Arial, Helvetica, sans-serif; 
color: #FFF; 
font-size: 11px; 
text-align: center; 
cursor: pointer; 
} 
</style>

<div class="examples_body">
<ul class="bannerHolder">
If there is an error message in the lower left corner, just refresh it.
 
<li>
<div class="banner">
<a href="#" target="_blank">
<img    style="max-width:90%"  style="max-width:90%" alt="The Best Designs" src="http://files.jb51.net/upload/201010/20101031232000647.jpg">
</a><p class="companyInfo"></p>
<div class="cornerTL">Visit The Best Designs</div>
<div class="cornerTR"></div>
<div class="cornerBL"></div>
<div class="cornerBR"></div>
</div>
</li>
<li>
<div class="banner">
<a href="#" target="_blank">
<img    style="max-width:90%"  style="max-width:90%" alt="The Best Designs" src="http://files.jb51.net/upload/201010/20101031232000265.jpg">
</a><p class="companyInfo"></p>
<div class="cornerTL">Visit The Best Designs</div>
<div class="cornerTR"></div>
<div class="cornerBL"></div>
<div class="cornerBR"></div>
</div>
</li>
<li>
<div class="banner">
<a href="#" target="_blank">
<img    style="max-width:90%"  style="max-width:90%" alt="The Best Designs" src="http://files.jb51.net/upload/201010/20101031232000265.jpg">
</a><p class="companyInfo"></p>
<div class="cornerTL">Visit The Best Designs</div>
<div class="cornerTR"></div>
<div class="cornerBL"></div>
<div class="cornerBR"></div>
</div>
</li>
<li>
<div class="banner">
<a href="#" target="_blank">
<img    style="max-width:90%"  style="max-width:90%" alt="The Best Designs" src="http://files.jb51.net/upload/201010/20101031232000235.jpg">
</a><p class="companyInfo"></p>
<div class="cornerTL">Visit The Best Designs</div>
<div class="cornerTR"></div>
<div class="cornerBL"></div>
<div class="cornerBR"></div>
</div>
</li>
<li>
<div class="banner">
<a href="#" target="_blank">
<img    style="max-width:90%"  style="max-width:90%" alt="The Best Designs" src="http://files.jb51.net/upload/201010/20101031232000225.jpg">
</a><p class="companyInfo"></p>
<div class="cornerTL">Visit The Best Designs</div>
<div class="cornerTR"></div>
<div class="cornerBL"></div>
<div class="cornerBR"></div>
</div>
</li>
</ul>
</div>

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：jQuery sample collection_jqueryNext article：jQuery sample collection_jquery

See more

Image mask animation effect of sensor mouse_image special effects

Related articles