CSSだけでLightbox風に画像ポップアップ
Result
アニメーションエフェクトの不要なら結構シンプルなコードになります
css
.row figure {
height: 240px;
width: 240px;
margin: 0;
background-size: cover;
background-position: 50% 50%;
transition: all 1s ease-in-out;
background-repeat: no-repeat;
z-index: 2;
display: inline-block;
position: relative;
}
.row a {
display: inline-block;
text-align: center;
margin: 40px;
text-decoration: none;
color: white;
}
.row a p {
position: absolute;
opacity: 0;
font-size: 20px;
top: 45%;
z-index: 100;
left: 0;
right: 0;
margin: auto;
}
figure:hover p {
opacity: 1;
}
figure:after {
content: "";
display: inline-block;
height: 100%;
width: 100%;
background-color: blue;
position: absolute;
left: 0;
bottom: 0;
opacity: 0;
transition: all 0.4s ease-in-out 0s;
z-index: 99;
}
figure:hover:after {
opacity: 0.7;
}
.photo01 {
background-image: url("https://picsum.photos/700/500");
}
.photo02 {
background-image: url("https://picsum.photos/701/500");
}
.photo03 {
background-image: url("https://picsum.photos/703/500");
}
.lightbox-target {
position: fixed;
top: -100%;
width: 100%;
background: rgba(0, 0, 0, 0.7);
width: 100%;
opacity: 0;
transition: opacity 0.5s ease-in-out;
overflow: hidden;
z-index: 300;
}
.lightbox-target .container {
margin: auto;
position: absolute;
top: 50vh;
left: 50vw;
background-color: white;
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
transition: 0.5s ease-in-out;
text-align: left;
transform: translate3d(-50%, -50%, 0);
}
a.lightbox-close {
display: block;
width: 50px;
height: 50px;
background: white;
color: black;
text-decoration: none;
position: absolute;
top: 0;
right: 0;
margin: 0;
padding-top: 10px;
}
.lightbox-target:target {
opacity: 1;
top: 0;
bottom: 0;
}
.lightbox-target:target img {
height: 400px;
vertical-align: top;
}
|
html
<div class="row">
<a class="lightbox" href="#photo01">
<figure class="photo01">
<p>Photo 01</p>
</figure>
</a>
<div class="lightbox-target" id="photo01">
<div class="container">
<img src="https://picsum.photos/700/500">
<a class="lightbox-close" href="#">X</a>
</div>
</div>
・
・
・
</div>
|
via
CSS Lightbox
