久久资源网

css hover案例图片文字列表悬停切换代码

css hover案例图片文字列表悬停切换代码

2020-12-05 21:43:59 DIV CSS

售价:5.00积分 会员免费

特别声明:资源售价只是赞助,不代表代码或者素材本身点数。收取费用仅维持本站的日常运营所需!

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>

资源出处:https://www.moyublog.com/codes/628.html

关注微信