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>
