Home >Web Front-end >HTML Tutorial >How to achieve this effect in the picture? _html/css_WEB-ITnose
How to achieve this effect in the picture? _html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:25:481019browse
The picture originally looked like this
Put the pointer on the picture, and this layer of text will appear
Please solve?
Reply to the discussion (solution)
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.
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