<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS AVANZADO</title>
<style type="text/css">
/*
Estructura de galeria con slider
div id=galeria-contenedor
|
| input radio name="galeria-miniaturas" id="galeria-op1"
| input radio name="galeria-miniaturas" id="galeria-op2"
| .
| .
| .
| input radio name="galeria-miniaturas" id="galeria-op20"
|
| div id="galeria-visor"
| |
| | div class="galeria-imagen-grande" id="galeria-grande1"
| | | <img> imagen
| | | <p> comentario
| | ------------------------------------------------------
| |
| | div class="galeria-imagen-grande" id="galeria-grande2"
| | | <img> imagen
| | | <p> comentario
| | ------------------------------------------------------
| | .
| | .
| | .
| | div class="galeria-imagen-grande" id="galeria-grande20"
| | | <img> imagen
| | | <p> comentario
| | ------------------------------------------------------
| |------------------------------------------------------
|
|
| label for="galeria-op1"
| | img class="galeria-miniatura" id="galeria-miniatura1"
| ------------------------------------------------------
|
| label for="galeria-op2"
| | img class="galeria-miniatura" id="galeria-miniatura2"
| ------------------------------------------------------
| .
| .
| .
| label for="galeria-op20"
| | img class="galeria-miniatura" id="galeria-miniatura20"
| ------------------------------------------------------
|
----------------------------------------
*/
*{
box-sizing: border-box;
}
#galeria-contenedor{
margin: 0 auto;
width:80%;
height: 680px;
text-align: center;
overflow: hidden;
}
#galeria-visor{
position: relative;
width: 300%; /*cantidad de imagenes x 100 % para la cantidad de imagenes que son maximo 20 imagenes 2000%*/
height:80%;
-webkit-transition: left 1s;
-moz-transition: left 1s;
transition: left 1s;
overflow: hidden;
}
input[name=galeria-miniaturas]{
display: none;
}
.galeria-miniatura{
width:5%;
height:auto;
cursor: pointer;
}
.galeria-imagen-grande{
position: relative;
width: 33.30%; /*100 % dividido la cantidad de imagenes*/
height: auto;
max-height: 100%;
float: left;
}
.galeria-imagen-grande img{
width: 100%;
height: auto;
}
.galeria-imagen-grande p{
position: absolute;
bottom: 10px;
left: 10px;
padding: 5px;
color: white;
background-color: rgba(0,0,0,.5);
font-family: arial;
font-size: 14px;
font-style: italic;
font-weight: 500;
text-align: justify;
max-width: 80%;
max-height: 20%;
overflow-x: hidden;
overflow-y: auto;
}
/*20 imagenes de maximo en la galeria*/
#galeria-op1:checked ~ #galeria-visor{
left: 0;
}
#galeria-op2:checked ~ #galeria-visor{
left: -100%;
}
#galeria-op3:checked ~ #galeria-visor{
left: -200%;
}
#galeria-op4:checked ~ #galeria-visor{
left: -300%;
}
#galeria-op5:checked ~ #galeria-visor{
left: -400%;
}
#galeria-op6:checked ~ #galeria-visor{
left: -500%;
}
#galeria-op7:checked ~ #galeria-visor{
left: -600%;
}
#galeria-op8:checked ~ #galeria-visor{
left: -700%;
}
#galeria-op9:checked ~ #galeria-visor{
left: -800%;
}
#galeria-op10:checked ~ #galeria-visor{
left: -900%;
}
#galeria-op11:checked ~ #galeria-visor{
left: -1000%;
}
#galeria-op12:checked ~ #galeria-visor{
left: -1100%;
}
#galeria-op13:checked ~ #galeria-visor{
left: -1200%;
}
#galeria-op14:checked ~ #galeria-visor{
left: -1300%;
}
#galeria-op15:checked ~ #galeria-visor{
left: -1400%;
}
#galeria-op16:checked ~ #galeria-visor{
left: -1500%;
}
#galeria-op17:checked ~ #galeria-visor{
left: -1600%;
}
#galeria-op18:checked ~ #galeria-visor{
left: -1700%;
}
#galeria-op19:checked ~ #galeria-visor{
left: -1800%;
}
#galeria-op20:checked ~ #galeria-visor{
left: -1900%;
}
/*Pinta azul a las hasta 20 miniaturas*/
#galeria-op1:checked ~ label #galeria-miniatura1,
#galeria-op2:checked ~ label #galeria-miniatura2,
#galeria-op3:checked ~ label #galeria-miniatura3,
#galeria-op4:checked ~ label #galeria-miniatura4,
#galeria-op5:checked ~ label #galeria-miniatura5,
#galeria-op6:checked ~ label #galeria-miniatura6,
#galeria-op7:checked ~ label #galeria-miniatura7,
#galeria-op8:checked ~ label #galeria-miniatura8,
#galeria-op9:checked ~ label #galeria-miniatura9,
#galeria-op10:checked ~ label #galeria-miniatura10,
#galeria-op11:checked ~ label #galeria-miniatura11,
#galeria-op12:checked ~ label #galeria-miniatura12,
#galeria-op13:checked ~ label #galeria-miniatura13,
#galeria-op14:checked ~ label #galeria-miniatura14,
#galeria-op15:checked ~ label #galeria-miniatura15,
#galeria-op16:checked ~ label #galeria-miniatura16,
#galeria-op17:checked ~ label #galeria-miniatura17,
#galeria-op18:checked ~ label #galeria-miniatura18,
#galeria-op19:checked ~ label #galeria-miniatura19,
#galeria-op20:checked ~ label #galeria-miniatura20{
border: 2px solid blue;
}
</style>
</head>
<body>
<div id="galeria-contenedor">
<input type="radio" name="galeria-miniaturas" id="galeria-op1" checked>
<input type="radio" name="galeria-miniaturas" id="galeria-op2">
<input type="radio" name="galeria-miniaturas" id="galeria-op3">
<div id="galeria-visor">
<div class="galeria-imagen-grande" id="galeria-grande1">
<img src="http://imagenesdepaisajeshermosos.com/wp-content/uploads/2015/05/imagenes-de-paisajes-con-cascadas-5.jpg">
<p>Este es el comentario para la imagen 1</p>
</div>
<div class="galeria-imagen-grande" id="galeria-grande2">
<img src="https://brendarocha26.files.wordpress.com/2015/02/paisajes-naturales.jpg">
<p>Este es el segundo comentario comentario - imagen 2</p>
</div>
<div class="galeria-imagen-grande" id="galeria-grande3">
<img src="http://gianmarcos04.files.wordpress.com/2011/04/paisajes-de-japoneses-312254.jpg">
<p>Este es el ultimo comentario: <br> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<label for="galeria-op1">
<img class="galeria-miniatura" id="galeria-miniatura1" src="http://imagenesdepaisajeshermosos.com/wp-content/uploads/2015/05/imagenes-de-paisajes-con-cascadas-5.jpg">
</label>
<label for="galeria-op2">
<img class="galeria-miniatura" id="galeria-miniatura2" src="https://brendarocha26.files.wordpress.com/2015/02/paisajes-naturales.jpg">
</label>
<label for="galeria-op3">
<img class="galeria-miniatura" id="galeria-miniatura3" src="http://gianmarcos04.files.wordpress.com/2011/04/paisajes-de-japoneses-312254.jpg">
</label>
</div>
</body>
</html>
Realizacion de una galeria de imagenes utilizando solo HTML5 y CSS3, Esta muy simple y sin maquetado complejo, para entender bien su funcionamiento. Soporta asi como esta hasta 20 imagenes cambiando algunas cositas del css.Enjoy!
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.