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

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

给TA打赏
共{{data.count}}人
人已打赏
建站教程

【主题美化】Lightsns主题文章专题自定义html,增加专题效果

2019-10-18 15:02:29

建站教程

Typecho 引入 DPlayer 的简单方法

2019-10-18 15:10:27

本站所发布的一切源码、模板、应用等文章仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版,购买注册,得到更好的正版服务。如有侵权。本站内容适用于DMCA政策。若您的权利被侵害,请与我们联系处理,站长 QQ: 84087680 或 点击右侧 私信:盾给网 反馈,我们将尽快处理。
⚠️
本站所发布的一切源码、模板、应用等文章仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版,购买注册,得到更好的正版服务。如有侵权。本站内容适用于DMCA政策
若您的权利被侵害,请与我们联系处理,站长 QQ: 84087680 或 点击右侧 私信:盾给网 反馈,我们将尽快处理。
2 条回复 A文章作者 M管理员
  1. rui7157

    怎么没人看隐藏内容

  2. 593002590

    怎么没人看隐藏内容

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索