【主题美化】Lightsns主题文章专题自定义 / B

背景采用了渐变（请根据个人喜好修改），可与上次分享的自定义 / 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>

原文地址：https://acglt.com/2126.html