上次分享了第一种,闲的没事又整一个,来分享给大家。

老样子,直接上图好了,看下图:

背景采用了渐变(请根据个人喜好修改),可与上次分享的自定义 / A 一同使用,一起使用的效果如上图。

使用方法:后台 - 专题模块 - 文章/帖子专题 - 添加模块数据 - 自定义html - 直接丢进去 - 保存设置

<style>
.feature-content {
	margin-top: 10px;
	display: inline-block;
	position: relative;
}
 
.top-feature {
	width: 100%;
	height: auto;
	margin-bottom: 40px;
}
 
.top-feature img {
	height: 180px;
	width: 330px;
  border-radius: 4px;
}
 
.top-feature li {
	width: calc((100% - 60px)/3);
	float: left;
	margin: 0 0 20px 20px;
	position: relative;
	display: block;
}
 
.feature-title span {
	position: absolute;
	width: 100%;
	height: 180px;
	text-align: center;
	line-height: 180px;
	background: linear-gradient(120deg, #e0c3fc 10%, #8ec5fc 100%) !important;
	color: white;
	font-size: 16px;
	opacity: 0;
  border-radius: 4px;
}
 
.foverlay {
	-moz-transition: opacity .5s ease-out;
	-o-transition: opacity .5s ease-out;
	-webkit-transition: opacity .5s ease-out;
	transition: opacity .5s ease-out;
}
 
.top-feature li:hover .feature-title span {
	opacity: 1;
}
</style>
<div class="top-feature">
	<h1 class="fes-title">¾Û½¹</h1>
<div class="feature-content">
  
  <li class="feature-1">
		<a href="#">
			<div class="feature-title">
			    <span class="foverlay">²âÊÔ/1</span>
			</div>
			    <img src="https://cnm666.oss-cn-hongkong.aliyuncs.com/b2/2019/09/1df4574f8b0c93.jpg">
		</a>
	</li>
	
	<li class="feature-1">
		<a href="#">
			<div class="feature-title">
			    <span class="foverlay">²âÊÔ/2</span>
			</div>
			<img src="https://cnm666.oss-cn-hongkong.aliyuncs.com/b2/2019/06/frida-6.jpg">
		</a>
	</li>
	
	<li class="feature-1">
		<a href="#">
			<div class="feature-title">
			    <span class="foverlay">²âÊÔ/3</span>
			</div>
			    <img src="https://cnm666.oss-cn-hongkong.aliyuncs.com/b2/2019/06/frida-2.jpg">
		</a>
	</li>
  
  </div>
</div>

 

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。