基于jQuery遮罩图片hover翻转效果。这是一款基于jQuery+css3实现的鼠标经过遮罩图片翻转特效。效果图如下：

在线预览    源码下载

实现的代码。

html代码：

<div class="index_hd">
	<div class="fr hd_r major-list-outer">
		<ul class="major-list">
			<li class="major-item">
				<a href="http://www.w2bc.com/">
					<span class="txt-hide front-face">
						<img src="images/1413775760-7544.jpg" width="294" height="267">
					</span>
					<span class="back-face to-left"></span>
				</a>
			</li>
			<li class="major-item">
				<a href="http://www.w2bc.com/">
					<span class="txt-hide front-face">
						<img src="images/1400684346-4329.jpg" width="294" height="267">
					</span>
					<span class="back-face to-right"></span>
				</a>
			</li>
			<li class="major-item">
				<a href="http://www.w2bc.com/">
					<span class="txt-hide front-face">
						<img src="images/1413775714-2418.jpg" width="294" height="267">
					</span>
					<span class="back-face to-top"></span>
				</a>
			</li>
			<li class="major-item">
				<a href="http://www.w2bc.com/">
					<span class="txt-hide front-face">
						<img src="images/1411890878-8918.jpg" width="294" height="267">
					</span>
					<span class="back-face to-top"></span>
				</a>
			</li>
            <li class="major-item">
				<a href="http://www.w2bc.com/">
					<span class="txt-hide front-face">
						<img src="images/1413775714-2418.jpg" width="294" height="267">
					</span>
					<span class="back-face to-top"></span>
				</a>
			</li>
			<li class="major-item">
				<a href="http://www.w2bc.com/">
					<span class="txt-hide front-face">
						<img src="images/1400684434-4609.jpg" width="294" height="267">
					</span>
					<span class="back-face to-top"></span>
				</a>
			</li>
            <li class="major-item">
				<a href="http://www.w2bc.com/">
					<span class="txt-hide front-face">
						<img src="images/1428032296-8158.jpg" width="294" height="267">
					</span>
					<span class="back-face to-top"></span>
				</a>
			</li>
			<li class="major-item">
				<a href="http://www.w2bc.com/">
					<span class="txt-hide front-face">
						<img src="images/1405250374-3685.jpg" width="294" height="267">
					</span>
					<span class="back-face to-top"></span>
				</a>
			</li>
		</ul>
	</div>
</div>

via：http://www.w2bc.com/Article/39562

在线预览    源码下载