Heim > Artikel > Web-Frontend > 图片上的这种效果怎么实现？_html/css_WEB-ITnose
图片上的这种效果怎么实现？_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:25:48975Durchsuche
图片本来是这样的
把指针发在图片上面，就出现这么一层文字
求解？
回复讨论(解决方案)
这个就是感应鼠标的图片遮罩动画效果，给你个网上的例子：
<!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><title>感应鼠标的图片遮罩动画效果</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><script type="text/javascript" src="http://www.veryhuo.com/uploads/common/js/jquery-1.3.2.js"></script><script type="text/javascript">$(document).ready(function(){$('.banner div').css('opacity',0.4);$('.banner').hover(function(){var el = $(this);el.find('div').stop().animate({width:200,height:200},'slow',function(){el.find('p').fadeIn('fast');});},function(){var el = $(this);el.find('p').stop(true,true).hide();el.find('div').stop().animate({width:60,height:60},'fast');}).click(function(){window.open($(this).find('a').attr('href'));});});</script></head><body><div class="examples_body"><ul class="bannerHolder"><li><div class="banner"><a href="#" target="_blank"><img style="max-width:90%" width="125" alt="The Best Designs" src="http://www.veryhuo.com/uploads/common/images/p2.jpg"></a><p class="companyInfo">Visit The Best Designs</p><div class="cornerTL"></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%" width="125" alt="The Best Designs" src="http://www.veryhuo.com/uploads/common/images/p3.jpg"></a><p class="companyInfo">Visit The Best Designs</p><div class="cornerTL"></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%" width="125" alt="The Best Designs" src="http://www.veryhuo.com/uploads/common/images/p3.jpg"></a><p class="companyInfo">Visit The Best Designs</p><div class="cornerTL"></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%" width="125" alt="The Best Designs" src="http://www.veryhuo.com/uploads/common/images/p4.jpg"></a><p class="companyInfo">Visit The Best Designs</p><div class="cornerTL"></div><div class="cornerTR"></div><div class="cornerBL"></div><div class="cornerBR"></div></div></li></ul></div></body></html> 一个透明层放图片上就可以了。
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：CSS实现表头固定的可滚动表格的浏览器兼容问题_html/css_WEB-ITnoseNächster Artikel：懒人的诉求：有没有支持CSS文件的可视化的页面开发工具？_html/css_WEB-ITnose