css hover案例圖片文字列表懸停切換代碼

使用方法：

1、head引入css文件

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

2、body引入HTML代碼

<div class="case-container">
	<div class="case-index-title">
		<h2>他們都在使用我們的產(chǎn)品</h2>
		<a href="javascript:;">全部案例</a>
	</div>
	<div class="case-index-content">
		<ul class="clearfix">
			<li class="case-example-item">
				<a href="#">
					<img src="images/img001.jpg" alt="" class="case-pad">
					<div class="case-item-info">
						<div class="case-info-logo"><img src="images/logo-001.jpg" alt=""></div>
						<div class="case-info-title">經(jīng)營(yíng)類目：服裝服飾</div>
						<div class="case-info-text">對(duì)現(xiàn)在社會(huì)來說，服裝已經(jīng)是每個(gè)人裝飾自己，保護(hù)自己，不僅僅為穿，還是一個(gè)身份、一種生活態(tài)度、一個(gè)展示個(gè)人魅力的表現(xiàn)。</div>
					</div>

				</a>
			</li>
			<li class="case-example-item">
				<a href="#">
					<img src="images/img002.jpg" alt="" class="case-pad">
					<div class="case-item-info">
						<div class="case-info-logo"><img src="images/logo-002.jpg" alt=""></div>
						<div class="case-info-title">經(jīng)營(yíng)類目：食品生鮮</div>
						<div class="case-info-text">生鮮是指未經(jīng)烹調(diào)、制作等深加工過程，只做必要保鮮和簡(jiǎn)單整理上架而出售的初級(jí)產(chǎn)品，以及面包。</div>
					</div>
				</a>
			</li>
			<li class="case-example-item">
				<a href="#">
					<img src="images/img003.jpg" alt="" class="case-pad">
					<div class="case-item-info">
						<div class="case-info-logo"><img src="images/logo-003.jpg" alt=""></div>
						<div class="case-info-title">經(jīng)營(yíng)類目：電腦／配件</div>
						<div class="case-info-text">雷神科技是一家致力于專業(yè)游戲裝備的互聯(lián)網(wǎng)公司，向玩家提供國(guó)際一流品質(zhì)和性能的游戲本。</div>
					</div>
				</a>
			</li>
			<li class="case-example-item">
				<a href="#">
					<img src="images/img004.jpg" alt="" class="case-pad">
					<div class="case-item-info">
						<div class="case-info-logo"><img src="images/logo-004.jpg" alt=""></div>
						<div class="case-info-title">經(jīng)營(yíng)類目：醫(yī)藥</div>
						<div class="case-info-text">易索藥房，專注于終端藥店的O2O平臺(tái)，讓商家專業(yè)賣藥，讓患者科學(xué)用藥提供便捷的遠(yuǎn)程藥事服務(wù)電子處方支持。</div>
					</div>
				</a>
			</li>
			<li class="case-example-item">
				<a href="#">
					<img src="images/img005.jpg" alt="" class="case-pad">
					<div class="case-item-info">
						<div class="case-info-logo"><img src="images/logo-005.jpg" alt=""></div>
						<div class="case-info-title">經(jīng)營(yíng)類目：圖書發(fā)行、批發(fā)零售</div>
						<div class="case-info-text">聊城市魯西圖書銷售有限公司是民營(yíng)圖書發(fā)行公司，經(jīng)營(yíng)范圍涵蓋圖書發(fā)行、批發(fā)、零售，倉(cāng)儲(chǔ)，物流。</div>
					</div>
				</a>
			</li>
			<li class="case-example-item">
				<a href="#">
					<img src="images/img006.jpg" alt="" class="case-pad">
					<div class="case-item-info">
						<div class="case-info-logo"><img src="images/logo-006.jpg" alt=""></div>
						<div class="case-info-title">經(jīng)營(yíng)類目：農(nóng)產(chǎn)品</div>
						<div class="case-info-text">定位于B2B和B2C運(yùn)營(yíng)模式，目的在于整合特色農(nóng)產(chǎn)品，通過平臺(tái)進(jìn)行分揀包裝、交易配送。</div>
					</div>
				</a>
			</li>
			<li class="case-example-item">
				<a href="#">
					<img src="images/img007.jpg" alt="" class="case-pad">
					<div class="case-item-info">
						<div class="case-info-logo"><img src="images/logo-007.jpg" alt=""></div>
						<div class="case-info-title">經(jīng)營(yíng)類目：文化藝術(shù)品</div>
						<div class="case-info-text">由遼寧文博藝術(shù)品產(chǎn)權(quán)交易中心打造，為文化藝術(shù)品愛好者提供安全的網(wǎng)上交易服務(wù)。</div>
					</div>
				</a>
			</li>
			<li class="case-example-item">
				<a href="#">
					<img src="images/img008.jpg" alt="" class="case-pad">
					<div class="case-item-info">
						<div class="case-info-logo"><img src="images/logo-008.jpg" alt=""></div>
						<div class="case-info-title">經(jīng)營(yíng)類目：生活服務(wù)</div>
						<div class="case-info-text">盟友88致力于為用戶打造“電商＋店商＋點(diǎn)商”的“B2C+O2O”智能生活服務(wù)平臺(tái)。</div>
					</div>
				</a>
			</li>
		</ul>
	</div>
</div>