jQuery鼠标悬停图片动画显示文字信息特效代码下载

jQuery鼠标悬停图片动画显示文字信息特效代码下载

1. 引入CSS

<link href="css/style.css" type="text/css" rel="stylesheet" />

2. 引入JS

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.zalki_hover_img.min-0.2.js"></script>

3. HTML代码

<div id="container">
	<div class="main_box user_style1" data-hipop="one"><img src="images/1.jpg"><a href="#" class="popup"></a></div>
	<div class="main_box user_style2" data-hipop="two"><img src="images/2.jpg"><a href="#" class="popup"></a><a href="#" class="popup2"></a></div>
	<div class="main_box user_style3" data-hipop="one-horizontal"><img src="images/3.jpg"><a href="#" class="popup">BUY</a></div>
	<div class="main_box user_style4" data-hipop="two-horizontal"><img src="images/4.jpg"><a href="#" class="popup"></a><a href="#" class="popup2"></a></div>
	<div class="main_box user_style5" data-hipop="text_content">
		<img src="images/5.jpg" title alt="Img preview">
		<p class="textTitle"> Title Here </p>
		<p class="textBox">
			Lorem ipsum dolor sit amet, consectetur adipiscing 
			elit. Aliquam vel mauris orci, nec lobortis sem. Ut urna dui, vehicula vel 
			gravida non, egestas nec eros. Vivamus euismod, erat quis lobortis ullamcorper, 
			libero justo hendrerit velit, in ornare erat ipsum scelerisque nisl. Etiam 
			pharetra sodales dui, nec dignissim nisi adipiscing vel. Integer luctus 
			mi elementum mi ullamcorper eu varius enim rutrum. Morbi gravida dolor eu 
			leo dictum vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing 
			elit. Aliquam vel mauris orci, nec lobortis sem. Ut urna dui, vehicula vel 
			gravida non, egestas nec eros. <a href="#">Read More</a>
		</p>
	</div>
	<div class="main_box user_style6" data-hipop="text_content">
		<img src="images/6.jpg" title alt="Img preview">
		<p class="textTitle"> Title Here </p>
		<p class="textBox">
			Lorem ipsum dolor sit amet, consectetur adipiscing 
			elit. Aliquam vel mauris orci, nec lobortis sem. Ut urna dui, vehicula vel 
			gravida non, egestas nec eros. Vivamus euismod, erat quis lobortis ullamcorper, 
			libero justo hendrerit velit, in ornare erat ipsum scelerisque nisl. <a href="#">Link</a>
		</p>
	</div>
	<div class="main_box user_style11" data-hipop="text_content2">
		<img src="images/11.jpg" title alt="Img preview">
		<p class="textTitle"> $7 </p>
		<p class="textBox">
			Lorem ipsum dolor sit amet, consectetur adipiscing 
			elit. Ut nec est viverra velit venenatis faucibus. Maecenas adipiscing, 
			lectus a hendrerit vulputate, tellus urna accumsan felis, semper tempor 
			mauris massa in odio. Duis sit amet nunc eu sem sagittis malesuada. <a href="#">Link</a>
		</p>
	</div>
	<div class="main_box user_style12" data-hipop="one-horizontal">
		<img src="images/12.jpg">
		<a href="#" class="popup">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nec est viverra 
		velit venenatis faucibus. Maecenas adipiscing, lectus a hendrerit vulputate, 
		tellus urna accumsan felis, semper tempor mauris massa in odio. Duis sit 
		amet nunc eu sem sagittis malesuada. </a>
	</div>
	<div class="main_box user_style13" data-hipop="one"><img src="images/13.jpg"><a href="#" class="popup"></a></div>
	<div class="main_box user_style7" data-hipop="text_content2">
		<img src="images/7.jpg" title alt="Img preview">
		<p class="textTitle"> Title Here </p>
		<p class="textBox">
			Lorem ipsum dolor sit amet, consectetur adipiscing 
			elit. Aliquam vel mauris orci, nec lobortis sem. Ut urna dui, vehicula vel 
			gravida non, egestas nec eros. <a href="#">Link</a>
		</p>
	</div>
	<div class="main_box user_style8" data-hipop="rub"><img src="images/8.jpg"><a href="#" class="r_board">AWESOME</a></div>
	<div class="main_box user_style9" data-hipop="rub"><img src="images/9.jpg"><a href="#" class="r_board"></a></div>
	<div class="main_box user_style10" data-hipop="rub"><img src="images/10.jpg"><a href="#" class="r_board">$7</a></div>
</div>

用户评论

18素材网

一个让开发更高效的素材分享平台,用于快速开发强大的Web界面。


官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:864918708
Css3+Html5讨论群
群号:864918708

加群请备注:从官网了解到