css3案例圖片懸停文字滑動(dòng)特效

使用方法：

1、head引入css文件

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

2、body引入HTML代碼

<div class="trade-content">
	<div class="trade-title">
		<p>企業(yè)行業(yè)專屬建站</p>
	</div>
	<div class="trade-black">
		<div class="trade-box">
			<div class="trade-box-list">
				<div class="trade-box-item item01">
					<a href="#">
						<div class="item-logo">
							<img src="images/img001.svg" alt="">
						</div>
						<div class="item-title">外貿(mào)行業(yè)</div>
						<div class="item-text">
							<p>母語級(jí)翻譯</p>
							<p>提供“海外部署”</p>
							<p>打通海外社交媒體</p>
							<p>海外商機(jī)匯集</p>
						</div>
					</a>
				</div>
				<div class="trade-box-item item02">
					<a href="#">
						<div class="item-logo">
							<img src="images/img002.svg" alt="">
						</div>
						<div class="item-title">培訓(xùn)行業(yè)</div>
						<div class="item-text">
							<p>課程管理</p>
							<p>線上報(bào)名繳費(fèi)</p>
							<p>約課\試聽</p>
							<p>教師\學(xué)員管理</p>
						</div>
					</a>
				</div>
				<div class="trade-box-item item03">
					<a href="#">
						<div class="item-logo">
							<img src="images/img003.svg" alt="">
						</div>
						<div class="item-title">機(jī)械行業(yè)</div>
						<div class="item-text">
							<p>產(chǎn)品多參數(shù)展示</p>
							<p>360°產(chǎn)品展示</p>
							<p>視頻、下載</p>
							<p>參數(shù)對(duì)比、批量詢價(jià)</p>
						</div>
					</a>
				</div>
				<div class="trade-box-item item04">
					<a href="#">
						<div class="item-logo">
							<img src="images/img004.svg" alt="">
						</div>
						<div class="item-title">家裝行業(yè)</div>
						<div class="item-text">
							<p>裝修在線報(bào)價(jià)</p>
							<p>裝修效果動(dòng)態(tài)</p>
							<p>設(shè)計(jì)工具</p>
							<p>系統(tǒng)對(duì)接</p>
						</div>
					</a>
				</div>
				<div class="trade-box-item item05">
					<a href="#">
						<div class="item-logo">
							<img src="images/img005.svg" alt="">
						</div>
						<div class="item-title">酒店民宿業(yè)</div>
						<div class="item-text">
							<p>在線訂房訂餐業(yè)務(wù)</p>
							<p>一鍵導(dǎo)航</p>
							<p>移動(dòng)端營(yíng)銷</p>
						</div>
					</a>
				</div>
			</div>
		</div>
	</div>
</div>