Effect
The code is as follows:
<!doctype html>;} Ul,li{list-Style:none;} body{font:12px/20px "Microsoft Yahei", "SimSun", Arial,sans-serif; Background: #CCC;}. heartpic{width:749px;height:630px;margin:60px Auto 0Auto;}. Heartpic ul{float: left;width:749px;}. Heartpic ul li{float: Left;width:100px;height:100px;padding:2px;cursor:pointer;}. Heartpic ul Li.on{z-index:99;}. Heartpic ul Li.on.inch{position:relative;left:-50px;top:-50px;padding:5px 5px 20px 5px;background: #666;}. Heartpic ul Li Ptxt{display:none;width:100px;height:15px;text-align:center;color: #fff; overflow:hidden;}. Heartpic. Showdiv{display:block;}</style>$(function(){ $(". Heartpic li"). Hover (function(){ $( This). AddClass ("on"); $( This). FIND ("img"). Animate ({"width": "200px", "height": "200px"}); $( This). Find ("div"). Animate ({"width": "200px", "height": "200px"}); $( This). Find (". PTxt"). Animate ({"width": "200px", "height": "20px"}); $( This). Find ("P"). addclass ("Showdiv")); },function(){ $( This). Animate ({height: "100px"},100). Removeclass ("on"); $( This). FIND ("img"). Stop (true,true). Animate ({"width": "100px", "height": "100px"}); $( This). Find ("div"). Stop (true,true). Animate ({"width": "100px", "height": "100px"}); $( This). Find (". PTxt"). Stop (true,true). Animate ({"width": "0px", "height": "0px"}); });})</script><div style= "Text-align:center;clear:both" ></div></body>jquery effect heart-shaped image wall