jquery.magnific-popup实现自适应瀑布流相册点击放大效果代码
代码语言:html
所属分类:画廊相册
代码描述:jquery.magnific-popup实现自适应瀑布流相册点击放大效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.css">
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Montserrat:300,600'>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/magnific-popup.css">
<style>
.mfp-with-zoom .mfp-title, .touch .gallery-image figcaption, html:not(.touch) .gallery-image figcaption {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 14px;
color: rgba(255, 255, 255, 0);
padding: 1em;
transition: all 0.2s ease;
font-weight: 600;
max-width: calc(100% - 9em);
line-height: 1.25;
text-align: center;
box-sizing: border-box;
}
.mfp-with-zoom .mfp-title:before, .touch .gallery-image figcaption:before, html:not(.touch) .gallery-image figcaption:before, .mfp-with-zoom .mfp-title:after, .touch .gallery-image figcaption:after, html:not(.touch) .gallery-image figcaption:after {
content: "";
position: absolute;
background: rgba(0, 0, 0, 0.2);
width: 100%;
height: 100%;
padding: 1em;
transition: all 0.3s ease-in-out;
opacity: 0;
z-index: -1;
}
.mfp-with-zoom .mfp-title:before, .touch .gallery-image figcaption:before, html:not(.touch) .gallery-image figcaption:before, .mfp-with-zoom .mfp-title:after, .touch .gallery-image figcaption:after, html:not(.touch) .gallery-image figcaption:after {
right: 100%;
bottom: 100%;
}
.mfp-with-zoom .mfp-title:after, .touch .gallery-image figcaption:after, html:not(.touch) .gallery-image figcaption:after {
left: 100%;
top: 100%;
}
.mfp-with-zoom.mfp-ready .mfp-title, .touch .gallery-image figcaption, html:not(.touch) .gallery-image:hover figcaption {
color: white;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
transition: all 0.2s ease 0.3s;
}
.mfp-with-zoom.mfp-ready .mfp-title:before, .touch .gallery-image figcaption:before, html:not(.touch) .gallery-image:hover figcaption:before, .mfp-with-zoom.mfp-ready .mfp-title:after, .touch .gallery-image figcaption:after, html:not(.touch) .gallery-image:hover figcaption:after {
opacity: 1;
}
.mfp-with-zoom.mfp-ready .mfp-title:before, .touch .gallery-image figcaption:before, html:not(.touch) .gallery-image:hover figcaption:before {
right: -1.5em;
bottom: -1.5em;
}
.mfp-with-zoom.mfp-ready .mfp-title:after, .touch .gallery-image figcaption:after, html:not(.touch) .gallery-image:hover figcaption:after {
left: -1.5em;
t.........完整代码请登录后点击上方下载按钮下载查看
网友评论0