博客滑动相册封面导航教程

效果预览

导航栏

欢迎小可爱

导航栏

欢迎小可爱

食用方法

建议：直接在文章中添加 style标签+下文中的样式
或者 引入样式到样式表中

样式代码

• 小标题文字过多吞字bug修复

<style>
figure.gallery-group .gallery-group-name,
figure.gallery-group p {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical
}
.img-alt {
	margin: -.5rem 0 .5rem;
	color: #858585
}


figure.gallery-group {
	position: relative;
	float: left;
	overflow: hidden;
	margin: .3rem .2rem;
	width: calc(50% - .4rem);
	height: 250px;
	border-radius: 8px;
	background: #000;
	-webkit-transform: translate3d(0, 0, 0)
}

@media screen and (max-width:600px) {
	figure.gallery-group {
		width: calc(100% - .4rem)
	}
}

figure.gallery-group:hover img {
	opacity: .4;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-o-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0)
}

/*滑动动作*/
figure.gallery-group:hover .gallery-group-name::after {
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-o-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0)
}

/* 滑动文字 */
figure.gallery-group:hover p {
	opacity: 1;
	-ms-filter: none;
	filter: none;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-o-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);

       
}

figure.gallery-group img {
	position: relative;
	margin: 0 !important;
	max-width: none;
	width: calc(100% + 20px);
	height: 250px;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
	opacity: .8;
	-webkit-transition: opacity .35s, -webkit-transform .35s;
	-moz-transition: opacity .35s, -moz-transform .35s;
	-o-transition: opacity .35s, -o-transform .35s;
	-ms-transition: opacity .35s, -ms-transform .35s;
	transition: opacity .35s, transform .35s;
	-webkit-transform: translate3d(-10px, 0, 0);
	-moz-transform: translate3d(-10px, 0, 0);
	-o-transform: translate3d(-10px, 0, 0);
	-ms-transform: translate3d(-10px, 0, 0);
	transform: translate3d(-10px, 0, 0);
	object-fit: cover
}

/* 吞字bug修复 */
figure.gallery-group figcaption {
	position: absolute;
	top: 0;
	left: 0;
	padding: 1.5rem;
	width: 100%;
	height: 100%;
	color: #fff;
	text-transform: uppercase;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden

       box-sizing: border-box
}


figure.gallery-group figcaption>a {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1000;
	opacity: 0
}


figure.gallery-group p {
	margin: 0;
	padding: .4rem 0 0;
	letter-spacing: 1px;
	font-size: 1.1em;
	line-height: 1.5;
	opacity: 0;
	-webkit-transition: opacity .35s, -webkit-transform .35s;
	-moz-transition: opacity .35s, -moz-transform .35s;
	-o-transition: opacity .35s, -o-transform .35s;
	-ms-transition: opacity .35s, -ms-transform .35s;
	transition: opacity .35s, transform .35s;
	-webkit-transform: translate3d(100%, 0, 0);
	-moz-transform: translate3d(100%, 0, 0);
	-o-transform: translate3d(100%, 0, 0);
	-ms-transform: translate3d(100%, 0, 0);
	transform: translate3d(100%, 0, 0);
	-webkit-line-clamp: 4
}

figure.gallery-group .gallery-group-name {
	position: relative;
	margin: 0;
	padding: .4rem 0;
	font-weight: 700;
	font-size: 1.65em;
	line-height: 1.5;
	-webkit-line-clamp: 2
}


figure.gallery-group .gallery-group-name:after {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background: #fff;
	content: '';
	-webkit-transition: -webkit-transform .35s;
	-moz-transition: -moz-transform .35s;
	-o-transition: -o-transform .35s;
	-ms-transition: -ms-transform .35s;
	transition: transform .35s;
	-webkit-transform: translate3d(-100%, 0, 0);
	-moz-transform: translate3d(-100%, 0, 0);
	-o-transform: translate3d(-100%, 0, 0);
	-ms-transform: translate3d(-100%, 0, 0);
	transform: translate3d(-100%, 0, 0)
}


.gallery-group-main {
	overflow: auto;
	padding: 0 0 .8rem
}
</style>

使用格式

使用方法 插入一个div 使用如下标签即可

<div class="gallery-group-main">
<figure class="gallery-group">
  <img class="gallery-group-img entered loaded" src="https://gitee.com/serendipitychen/album/raw/master/banner/banner.jpg" 
  alt="Group Image Gallery" data-ll-status="loaded">
  <figcaption>
	  <div class="gallery-group-name">导航栏</div><p style="color:#fff">欢迎小可爱</p><a href="https://serendipitychen.gitee.io/webpage/index/index.html" data-pjax-state=""></a>
  </figcaption>
</figure>
<figure class="gallery-group">
  <img class="gallery-group-img entered loaded" src="https://gitee.com/serendipitychen/album/raw/master/flower/2.jpg" 
  alt="Group Image Gallery" data-ll-status="loaded">
  <figcaption>
	  <div class="gallery-group-name">导航栏</div><p style="color:#fff">欢迎小可爱</p><a href="" data-pjax-state=""></a>
  </figcaption>
</figure>