css3制作企業(yè)案例圖片菜單鼠標(biāo)懸停文字滑動切換遮罩效果。適用于圖片菜單懸停切換代碼。
使用方法:
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>母語級翻譯</p>
<p>提供“海外部署”</p>
<p>打通海外社交媒體</p>
<p>海外商機匯集</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>線上報名繳費</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">機械行業(yè)</div>
<div class="item-text">
<p>產(chǎn)品多參數(shù)展示</p>
<p>360°產(chǎn)品展示</p>
<p>視頻、下載</p>
<p>參數(shù)對比、批量詢價</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>裝修在線報價</p>
<p>裝修效果動態(tài)</p>
<p>設(shè)計工具</p>
<p>系統(tǒng)對接</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>移動端營銷</p>
</div>
</a>
</div>
</div>
</div>
</div>
</div>