【主题美化】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>

 

张昊翔博客原创文章,作者:,如若转载,请注明出处:
1、本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2、分享目的仅供大家学习和交流,请不要用于商业用途!
3、本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
4、如有链接无法下载、失效或广告,请联系管理员处理!
5、本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

笨羊博客(张昊翔博客) » 【主题美化】Lightsns主题文章专题自定义 / B

发表评论