div css3解決方案圖文布局特效

div基于css3屬性制作解決方案單排圖片鼠標懸停遮罩顯示文字詳情代碼。

使用方法：

1、head引入css文件

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

2、body引入HTML代碼

<div class="logout-solution-wrap">
	<div class="logout-solution">
		<p class="title">
			解決方案
			<a href="#" target="_blank"><span>查看更多</span></a>
		</p>
		<div class="lsbs">
			<div class="lsbs-container">
				<div class="lsb-background">
					<a class="lsb" href="#" target="_blank">
						<div class="lsb-icon"><img src="statics/images/icon1.png"></div>
						<p class="lsb-name">快消便利店</p>
						<div class="lsb-span"></div>
						<p class="lsb-introduce"><span>助力零售商構建生態閉環，數據驅動打通線上線下零售場景，提升消費者體驗。</span></p>
						<div class="lsb-href">
							<div><span>查看解決方案</span><i class="icon-jinru"></i></div>
						</div>
					</a>
				</div>
				<div class="lsb-background">
					<a class="lsb" href="#" target="_blank">
						<div class="lsb-icon"><img src="statics/images/icon2.png"></div>
						<p class="lsb-name">停車繳費</p>
						<div class="lsb-span"></div>
						<p class="lsb-introduce"><span>用戶開通無感停車，并進入無感停車停車場后，可以實現無現金繳費，也可以無手機，...</span></p>
						<div class="lsb-href">
							<div><span>查看解決方案</span><i class="icon-jinru"></i></div>
						</div>
					</a>
				</div>
				<div class="lsb-background">
					<a class="lsb" href="#" target="_blank">
						<div class="lsb-icon"><img src="statics/images/icon3.png"></div>
						<p class="lsb-name">未來校園</p>
						<div class="lsb-span"></div>
						<p class="lsb-introduce"><span>學生一站式繳費，集成多項校內服務。 校園內多種費用，一個入口輕松付款，學校集...</span></p>
						<div class="lsb-href">
							<div><span>查看解決方案</span><i class="icon-jinru"></i></div>
						</div>
					</a>
				</div>
			</div>
		</div>
	</div>
</div>

使用聲明

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

查看演示下載資源

0 8709 54

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

版權聲明

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

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

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