Hola encontré una galería de imágenes en codepen, creada por Olaman y estoy intentando agregar a mi proyecto.
La galería muestra un panel con unas listas verticales por las que al pasar el ratón, se despliegan las imágenes, apartando el resto de listas a los lados.
Bien, como dije tienen 5 imágenes, y yo quiero añadir 2 o 3 imágenes más. Pero como veréis en el ejemplo, al añadirlas se salen las imágenes por la parte de abajo del div
.
Con cinco funciona de maravilla, según pasamos el ratón por cada lista, se despliegan las imágenes una por una en el mismo div
, apartando al resto sin problema.
Por mas que le dado vueltas, no soy capaz de conseguir, probé a reducir el tamaño de las listas iniciales, sin éxito.
No se que mas hacer.
¿ Como podría meter más imágenes sin que se rompiera el efecto y permanecieran todas en el div
?
Muestro el ejemplo.
Gracias.
EDITO: Para poner la la fuente donde lo encontré, a petición de un compañero.
html, body {
margin: 0;
padding:0;
background: #ccc;
}
ul.acordeon * {
font-family: Arial, sans-serif;
-webkit-transition: all .6s ease-in-out;
-moz-transition: all .6s ease-in-out;
transition: all .6s ease-in-out;
}
ul.acordeon {
width: 100%;
overflow: hidden;
padding: 0;
background: #04850A;
text-align: center;
list-style: none;
font-size: 0;
box-shadow: 0 0 10px #333;
}
ul.acordeon li {
position: relative;
display: inline-block;
*display: inline; zoom: 1; /* IE7 */
width: 10%;
height:0;
padding-bottom: 40%; /* Ratio aspecto imagen = (height*X)/width */
background: #eee;
text-align: center;
box-shadow: -2px 0px 8px #999;
}
/* Títulos pestañas */
ul.acordeon li h4 {
position: relative;
top: 5%;
z-index: 1;
margin: 0;
font-size: 18px;
text-align: left;
text-transform: uppercase;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transform-origin: 10% 120%;
-moz-transform-origin: 10% 120%;
transform-origin: 10% 120%;
white-space: nowrap;
}
/* Contenido inicialmente oculto */
ul.acordeon li a, ul.acordeon li img {
position: absolute;
bottom: 0;
right: 0;
display: inline-block;
*display: inline; zoom: 1; /* IE7 */
width: 0;
padding:0;
background: #333;
}
/* Hover: Desplegamos elemento aumentando su ancho */
ul.acordeon li:hover {
width: 60%; /* 100 - 10*(nºelem-1) // X=60 para ratio imagen */
background: #333;
}
/* Hover: Hacemos que el título recupere la horizontal y le ponemos un fondo */
ul.acordeon li:hover h4 {
padding-left: 10px;
background: #04850A;
color: #eee;
-webkit-transform: none;
-moz-transform: none;
transform: none;
}
/* Hover: Expandimos el contenido */
ul.acordeon li:hover a, ul.acordeon li:hover a img {
width: 100%;
}
/* Ajustes para resoluciones pequeñas */
@media(max-width:600px) {
ul.acordeon li h4 {
font-size: 12px;
letter-spacing: 1px;
}
}
/* VARIACIONES PARA CONSEGUIR QUE EL MENU OCUPE INICIALMENTE TODO EL ANCHO
ul.acordeon li {
width: 20%;
}
ul.acordeon:hover li {
width: 10%;
}
ul.acordeon li:hover {
width: 60%;
}
*/
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CSS responsive accordion gallery/menu</title>
<link href="css/style-desbroces.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>
<ul class="acordeon">
<li>
<h4>Yecla</h4>
<a href="#">
<img src="https://1.bp.blogspot.com/-na8syCqA5QM/U2Y0MkeZeFI/AAAAAAAAPyA/5C7WeCVpcyE/s900/yecla.jpg"/>
</a>
</li>
<li>
<h4>Ricote</h4>
<a href="#">
<img src="https://3.bp.blogspot.com/-0VLtdXRmROw/U2Y0MBkDjKI/AAAAAAAAPx8/2WHDkLKpo3g/s900/ricote.jpg"/>
</a>
</li>
<li>
<h4>Bullas</h4>
<a href="#">
<img src="https://4.bp.blogspot.com/-dx4GDtQCuCY/U2Y0LT8IlRI/AAAAAAAAPxo/4XW_d21QrMk/s900/bullas.jpg"/>
</a>
</li>
<li>
<h4>Jumilla</h4>
<a href="#">
<img src="https://4.bp.blogspot.com/-8vVOgYUvpRA/U2Y0LTWXwFI/AAAAAAAAPxs/HPnmp59MYtk/s900/jumilla.jpg"/>
</a>
</li>
<li>
<h4>Jumilla</h4>
<a href="#">
<img src="https://4.bp.blogspot.com/-8vVOgYUvpRA/U2Y0LTWXwFI/AAAAAAAAPxs/HPnmp59MYtk/s900/jumilla.jpg"/>
</a>
</li>
<li>
<h4>Abanilla</h4>
<a href="#">
<img src="https://4.bp.blogspot.com/-yyHs3e39Tsg/U2Y0LHHoRmI/AAAAAAAAPxk/TnqknfWjR0s/s900/abanilla.jpg"/>
</a>
</li>
<li>
<h4>Abanilla</h4>
<a href="#">
<img src="https://4.bp.blogspot.com/-yyHs3e39Tsg/U2Y0LHHoRmI/AAAAAAAAPxk/TnqknfWjR0s/s900/abanilla.jpg"/>
</a>
</li>
</ul>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>