div基于css3 transform属性制作云产品功能应用单排响应式的图片卡片布局，通过鼠标悬停卡片文字图标切换效果代码。

使用方法

1、head引入css文件

<!--主要样式-->
<link rel="stylesheet" type="text/css" href="statics/css/style.css" />

<!--如不要字体标可以删除此css及字体↓，文中用到的也就一个小箭头-->
<link rel="stylesheet" type="text/css" href="statics/css/icon.css" />

2、body引入HTML代码

<div class="section section-mall">
	<div class="section-title">
		<h1>严选商城 为你臻选云上优品</h1>
		<h2>九大严选馆 直触需求 上云无忧</h2>
	</div>
	<div class="section-wrapper">
		<div class="mall-app">
			<ul>
				<li>
					<div class="mall-app-card" target="_blank">
						<div class="mall-app-card-bg" style="background-image: url(statics/images/homepage-mall-enterprise-bg.jpg)">
						</div>
						<div class="mall-app-card-top">
							<i style="background-image: url(statics/images/homepage-mall-enterprise-logo.svg)"></i>
							<h2>企业上云</h2>
							<p>汇聚业界精品应用，实现企业轻资产敏捷创新</p>
						</div>
						<div class="mall-app-card-bottom">
							<ul>
								<li>
									<a href="#" target="_blank">企业BI</a>
								</li>
								<li>
									<a href="#" target="_blank">模板建站</a>
								</li>
								<li>
									<a href="#" target="_blank">智能客服</a>
								</li>
							</ul>
						</div>
					</div>
				</li>
				<li>
					<div class="mall-app-card" target="_blank">
						<div class="mall-app-card-bg" style="background-image: url(statics/images/homepage-mall-solution-bg.jpg)">
						</div>
						<div class="mall-app-card-top">
							<i style="background-image: url(statics/images/homepage-mall-solution-logo.svg)"></i>
							<h2>智慧城市</h2>
							<p>深耕垂直行业，支持个性化定制，一站式解决客户诉求</p>
						</div>
						<div class="mall-app-card-bottom">
							<ul>
								<li>
									<a href="#" target="_blank">智慧教育大数据云平台</a>
								</li>
								<li>
									<a href="#" target="_blank">双创实践云平台</a>
								</li>
								<li>
									<a href="#" target="_blank">中小学智慧校园解决方案</a>
								</li>
							</ul>
						</div>
					</div>
				</li>
				<li>
					<div class="mall-app-card" target="_blank">
						<div class="mall-app-card-bg" style="background-image: url(statics/images/homepage-mall-video-bg.jpg)">
						</div>
						<div class="mall-app-card-top">
							<i style="background-image: url(statics/images/homepage-mall-video-logo.svg)"></i>
							<h2>视频</h2>
							<p>提供直播、转播、转码等视频能力，助力高效搭建视频业务</p>
						</div>
						<div class="mall-app-card-bottom">
							<ul>
								<li>
									<a href="#" target="_blank">云直播</a>
								</li>
								<li>
									<a href="#" target="_blank">云点播</a>
								</li>
								<li>
									<a href="#" target="_blank">直播转码</a>
								</li>
							</ul>
						</div>
					</div>
				</li>
				<li>
					<div class="mall-app-card" target="_blank">
						<div class="mall-app-card-bg" style="background-image: url(statics/images/homepage-mall-station-bg.jpg)">
						</div>
						<div class="mall-app-card-top">
							<i style="background-image: url(statics/images/homepage-mall-station-logo.svg)"></i>
							<h2>智能制造</h2>
							<p>覆盖设计仿真到经营管理各环节,实现敏捷创新、精细化运营</p>
						</div>
						<div class="mall-app-card-bottom">
							<ul>
								<li>
									<a href="#" target="_blank">企安易</a>
								</li>
								<li>
									<a href="#" target="_blank">设备宝</a>
								</li>
								<li>
									<a href="#" target="_blank">工业云平台</a>
								</li>
							</ul>
						</div>
					</div>
				</li>
			</ul>
		</div>
	</div>
	<div class="section-bottom">
		<div class="section-more-wrap">
			<a href="#" target="_blank"> <span>更多应用</span><i class="cui-icon cui-icon-more"></i> </a>
		</div>
	</div>
</div>

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