The picture originally looked like this
Put the pointer on the picture, and this layer of text will appear
Please solve?
This is the image mask animation effect of the mouse sensor. I will give you an example online:
<!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 height="100" 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 height="100" 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 height="100" 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 height="100" 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>Just put a transparent layer on top of the image.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
