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

div css：hover屬性制作全部案例圖片列表布局代碼，文件夾路徑清晰，div css 結構清晰，下載即可使用，頁面中均有備注，方便使用。

使用方法：

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>他們都在使用我們的產品</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">經營類目：服裝服飾</div>
						<div class="case-info-text">對現在社會來說，服裝已經是每個人裝飾自己，保護自己，不僅僅為穿，還是一個身份、一種生活態度、一個展示個人魅力的表現。</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">經營類目：食品生鮮</div>
						<div class="case-info-text">生鮮是指未經烹調、制作等深加工過程，只做必要保鮮和簡單整理上架而出售的初級產品，以及面包。</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">經營類目：電腦／配件</div>
						<div class="case-info-text">雷神科技是一家致力于專業游戲裝備的互聯網公司，向玩家提供國際一流品質和性能的游戲本。</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">經營類目：醫藥</div>
						<div class="case-info-text">易索藥房，專注于終端藥店的O2O平臺，讓商家專業賣藥，讓患者科學用藥提供便捷的遠程藥事服務電子處方支持。</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">經營類目：圖書發行、批發零售</div>
						<div class="case-info-text">聊城市魯西圖書銷售有限公司是民營圖書發行公司，經營范圍涵蓋圖書發行、批發、零售，倉儲，物流。</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">經營類目：農產品</div>
						<div class="case-info-text">定位于B2B和B2C運營模式，目的在于整合特色農產品，通過平臺進行分揀包裝、交易配送。</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">經營類目：文化藝術品</div>
						<div class="case-info-text">由遼寧文博藝術品產權交易中心打造，為文化藝術品愛好者提供安全的網上交易服務。</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">經營類目：生活服務</div>
						<div class="case-info-text">盟友88致力于為用戶打造“電商＋店商＋點商”的“B2C+O2O”智能生活服務平臺。</div>
					</div>
				</a>
			</li>
		</ul>
	</div>
</div>

使用聲明

1. 本站所有素材（未指定商用），僅限學習交流。
2. 會員在本站下載的原創商用和VIP素材后，只擁有使用權，著作權歸原作者及17素材網所有。
3. 原創商用和VIP素材，未經合法授權，請勿用于商業用途，會員不得以任何形式發布、傳播、復制、轉售該素材，否則一律封號處理。
4. 本平臺織夢模板僅展示和個人非盈利用途，織夢系統商業用途請預先授權。

查看演示下載資源

0 12326 84

軟件 Dreamweaver
格式 HTML
作者歪秀
版權 ? 原創商用（獨家） i

版權聲明

此作品是由17素材網簽約用戶上傳，17素材網擁有版權；未經17素材網書面授權，請勿作他用。人物肖像，字體及音頻如需商用需第三方額外授權；

17素材網尊重知識產權，如知識產權權利人認為平臺內容涉嫌侵權，可通過郵件：3264130392@qq.com提出書面通知，我們將及時處理。

網站提供的黨政主題相關內容（國旗、國徽、黨徽...），目的在于配合國家政策宣傳，僅限個人學習分享使用，禁止用于任何廣告和商用目的。