Galería lightbox modal y responsive, solo con CSS
Publicado en Publicación
Hasta ahora hemos visto que con CSS podemos dar estilo a casi cualquier elemento. En esta ocasión vamos a ver como crear una galería lighbox responsive sin utilizar javascript y con apenas unas líneas de código CSS.
Vista galería:
Vista modal, al pulsar sobre una imagen:
código
Elementos HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Galería lightbox responsive solo con CSS">
<meta name="author" content="(cc) 3con14" />
<title>Galería</title>
<link rel="stylesheet" href="/css/normalize.css">
<link rel="stylesheet" href="/css/estilos.css">
</head>
<body>
<main>
<h3>Galería de imágenes lightbox <br>responsive solo con CSS</h3>
<div class="galeria">
<div class="item"><a href="#img1"><img src="/img/1p.png"></a></div>
<div class="item"><a href="#img2"><img src="/img/2p.png"></a></div>
<div class="item"><a href="#img3"><img src="/img/3p.png"></a></div>
<div class="item"><a href="#img4"><img src="/img/4p.png"></a></div>
</div>
<div class="modal" id="img1">
<div class="imagen">
<a class="ant" href="#img4"></a>
<a href="#" title="cerrar"></a><img src="/i2017bto2/img/1g.jpg">
<a class="sig" href="#img2"></a>
</div>
</div>
<div class="modal" id="img2">
<div class="imagen">
<a class="ant" href="#img1"></a>
<a href="#" title="cerrar"></a><img src="/img/2g.jpg">
<a class="sig" href="#img3"></a>
</div>
</div>
<div class="modal" id="img3">
<div class="imagen">
<a class="ant" href="#img2"></a>
<a href="#" title="cerrar"></a><img src="/img/3g.jpg">
<a class="sig" href="#img4"></a>
</div>
</div>
<div class="modal" id="img4">
<div class="imagen">
<a class="ant" href="#img3"></a>
<a href="#" title="cerrar"></a><img src="/img/4g.jpg">
<a class="sig" href="#img1"></a>
</div>
</div>
</main>
</body>
</html>
Reglas CSS
:root { --separa: 4px; }
* {
box-sizing: border-box;
transition: all 0.3s;
}
html {
font : 16px sans-serif;
background : steelblue;
}
h3 { text-align: center; margin: 2em; }
main {
max-width: 800px;
width: 98%;
min-height: 96vh;
margin: 2vh auto;
}
.galeria {
max-width : 100%;
line-height : 0;
padding : var(--separa);
padding-right : 0;
display : flex;
flex-wrap : wrap;
justify-content : space-around;
}
.item {
padding: var(--separa);
width: 180px;
}
.item img {
max-width : 100%;
height : auto;
opacity : 0.4;
outline : 3px solid #fff;
}
.item img:hover {
opacity : 1;
cursor : pointer;
}
.modal {
display: none;
}
.modal:target {
display : block;
position : fixed;
top : 0;
left : 0;
width : 100vw;
height : 100%;
display : flex;
background-color : rgba(0,0,0,0.6);
}
.imagen {
margin : auto;
width : 100%;
display : flex;
justify-content : center;
align-items : center;
}
@keyframes zoom {
0% { opacity: 0.2; transform: scale(0.5); }
100% { opacity: 1; transform: scale(1);}
}
.imagen a { margin: 0 4px; }
.imagen img {
max-width : 100%;
width : 80vw;
height : auto;
border : 8px solid #fff;
animation : zoom 0.5s ease-in-out;
position : relative;
}
.imagen a:nth-child(2)::after {
content : "X";
width : 40px; height: 40px;
line-height : 40px;
text-align : center;
font-size : 2em;
border-radius : 50%;
border : 2px solid hsla(0, 0%, 0%, 0.3);
background : hsla(0, 0%, 0%, 0.5);
color : hsla(0, 100%, 50%, 0.5);
position : absolute;
top : 1vh;left: 1vw;
z-index : 1;
}
.imagen a:nth-child(2):hover::after {
border : 2px solid hsla(0, 0%, 100%, 0.6);
}
.imagen a:nth-child(2) {
margin : 0;
height : 100%;
}
.ant,.sig {
width : 0px; height: 0px;
border : 20px solid transparent;
}
.ant { border-right: 20px solid hsla(0, 100%, 100%, 0.8); }
.sig { border-left: 20px solid hsla(0, 100%, 100%, 0.8); }
.ant:hover { border-right: 20px solid hsla(0, 100%, 50%, 0.8); }
.sig:hover { border-left: 20px solid hsla(0, 100%, 50%, 0.8); }
