div基于css3属性制作云主机服务列表卡片布局，鼠标悬停滑动显示文字详情代码。

使用方法

1、head引入css文件

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

2、body引入HTML代码

<div class="specialty">
	<div class="wrapper">
		<div class="support-title">
			<h1>专业服务</h1>
		</div>
		<div class="support-body">
			<ul class="specialty-slide">

				<li>
					<a href="#" class="list">
						<i style="background:url('statics/images/support-service-icon0.svg') no-repeat"></i>
						<h1>上云迁移服务</h1>
					</a>
					<div class="specialty-content">
						<a href="#">
							<h1>上云迁移服务</h1>
							<p>提供专业的迁移方案和专属迁移工具支持，保证客户云业务平滑迁移，缩短整体业务云化周期，解除客户顾虑，聚焦于业务发展。</p>
						</a>
					</div>
				</li>

				<li>
					<a href="#" class="list">
						<i style="background:url('statics/images/support-service-icon1.svg') no-repeat"></i>
						<h1>云上保障护航服务</h1>

					</a>
					<div class="specialty-content">
						<a href="#">
							<h1>云上保障护航服务</h1>
							<p>为您云上业务提供专属保障护航服务。遵循“事前重预防，事中重保障，事后重总结”原则，协助客户从容应对业务高峰。</p>
						</a>
					</div>
				</li>

				<li>
					<a href="#" class="list">
						<i style="background:url('statics/images/support-service-icon2.svg') no-repeat"></i>
						<h1>可用性优化服务</h1>
					</a>
					<div class="specialty-content">
						<a href="#">
							<h1>可用性优化服务</h1>
							<p>基于您业务特点和对成本、性能和数据一致性的考虑，通过云服务资源来构建云上业务系统的可靠性，以免出现单点中断，降低故障几率，构建快速恢复能力。预防和面对突发问题，保障业务应用在复杂的环境下高效稳定运行。</p>
						</a>
					</div>
				</li>

				<li>
					<a href="#" class="list">
						<i style="background:url('statics/images/support-service-icon3.svg') no-repeat"></i>
						<h1>数据库咨询服务</h1>
					</a>
					<div class="specialty-content">
						<a href="#">
							<h1>数据库咨询服务</h1>
							<p>华为云数据库专家团队为您数据库业务的上云迁移、系统容量规划、数据库架构设计与改造、系统性能调优等提供专业的在线咨询服务，数据库疑难杂症解决和数据库系统保驾护航服务。</p>
						</a>
					</div>
				</li>

				<li>
					<a href="#" class="list">
						<i style="background:url('statics/images/support-service-icon4.svg') no-repeat"></i>
						<h1>安全专家服务</h1>
					</a>
					<div class="specialty-content">
						<a href="#">
							<h1>安全专家服务</h1>
							<p>华为云与第三方权威机构一起为您提供的“专家式”安全服务，来预防、监测、发现主机、站点及云上系统的安全风险，给出解决方案、整改建议及权威报告，并及时修复被攻击系统，降低损失等。</p>
						</a>
					</div>
				</li>

				<li>
					<a href="#" class="list">
						<i style="background:url('statics/images/support-service-icon5.svg') no-repeat"></i>
						<h1>云化服务化架构咨询服务</h1>
					</a>
					<div class="specialty-content">
						<a href="#">
							<h1>云化服务化架构咨询服务</h1>
							<p>提供最专业的指导、支持和协助和企业架构咨询、微服务设计咨询，帮助您从业务、应用、信息（数据）、技术架构层面统一规划设计业务系统，实现数字化转型。</p>
						</a>
					</div>
				</li>

				<li>
					<a href="#" class="list">
						<i style="background:url('statics/images/support-service-icon6.svg') no-repeat"></i>
						<h1>云容灾咨询服务</h1>
					</a>
					<div class="specialty-content">
						<a href="#">
							<h1>云容灾咨询服务</h1>
							<p>设计规划您基于云业务的容灾，防患于未然。</p>
						</a>
					</div>
				</li>

				<li>
					<a class="list">
						<i style="background:url('statics/images/support-service-icon7.svg') no-repeat"></i>
						<h1>敬请期待</h1>
					</a>
					<div class="specialty-content">
						<a href="#">
							<h1>云上保障护航服务8</h1>
							<p>设计规划您基于云业务的容灾，防患于未然。</p>
						</a>
					</div>
				</li>

			</ul>
		</div>
	</div>
</div>

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