Hola con la ayuda de @Edgar Gutiérrez hemos creado unas imágenes en acordeón.
Al pasar el ratón se van abriendo las imágenes. Lo que yo quería conseguir es que al principio estuviera recogida la lista en el centro del div
como en la imagen. Pasando varias veces el ratón por encima se consigue, pero yo quisiera que estuviera así de primeras, la lista recogida en el centro del div y las frases estuvieran en una sola línea en vertical, no en varias líneas como ahora.
No se si sera posible, lo intente pero no lo conseguí.
Muestro lo conseguido. Gracias.
html, body {
margin: 0;
padding:0;
background: #b2b2b2;
}
ul.acordeon * {
font-family: Arial, sans-serif;
transition: all .6s ease-in-out;
box-sizing: border-box;
margin: 0;
}
ul.acordeon {
width: var(--ancho);
overflow: hidden;
margin: 0 auto;
padding: 0 var(--space);
background: Darkcyan;
text-align: center;
list-style: none;
box-shadow: 0 0 10px #333;
display: flex;
justify-content: center;
}
.my_settings{
/*Espacio entre las pestañas y el acordeon*/
--space: 0;
/*Ancho del acordeon*/
--ancho: 90%; /*Tamaño que desees*/
/*Numero de pestañas */
--n: 8;
/*Ancho de cada pestaña*/
--x: calc( 100% / var(--n) );
/*Altura del acordeon*/
--y: 80vh; /*puedes colocarlo en pixeles, em o lo que quieras*/
/*Opcional: Ancho de pestañas no seleccionadas al momento de agrandar*/
--x1: calc(var(--x) / 2); /*entre mayor el número, más pequeñas se harán las otras pestañas*/
/*Opcional: Ancho de pestaña ampliada*/
--x2: calc( var(--x) * (var(--n) - 1) );
}
.acordeon li {
position: relative;
display: inline-flex;
overflow: hidden;
justify-content: center;
align-items: flex-start;
align-content: center;
*display: inline; zoom: 1; /* IE7 */
width: var(--x);
height: var(--y);
background: #d2d2d2;
box-shadow: -2px 0px 8px #999;
}
.acordeon:hover li{
width: var(--x1);
}
.acordeon:hover li:hover{
width: var(--x2); /*o puedes reemplazarlo por 100%*/
width: 100%;
}
.acordeon h4{
position: absolute;
z-index: 2;
top: 0;
left: 0;
background: rgba(255,255,255,0);
display: inline-flex;
font-size: 1em;
min-width: 0%;
transform-origin: 0% 100%;
transform:
translateY(-1em)
translateX(.25em)
rotateZ(90deg);
}
.acordeon li:hover h4{
padding-left: .5em;
color: white;
min-width: 100%;
transform: rotateZ(0deg);
background: rgba(100,255,100,.8);
}
.acordeon li img{
position: relative;
width: 400px;
height: 300px;
object-fit: cover;
display: block;
opacity: 0;
z-index: 1;
transform-origin: 100% 120%;
transform: scale(0);
}
.acordeon li:hover img{
opacity: 1;
transform: scale(1);
}
<!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 my_settings">
<li>
<h4>Yecla una ciudad donde las haya</h4>
<a href="#">
<img src="https://1.bp.blogspot.com/-na8syCqA5QM/U2Y0MkeZeFI/AAAAAAAAPyA/5C7WeCVpcyE/s900/yecla.jpg"/>
</a>
</li>
<li>
<h4>Ricote, otro ejemplo de esplendor </h4>
<a href="#">
<img src="https://3.bp.blogspot.com/-0VLtdXRmROw/U2Y0MBkDjKI/AAAAAAAAPx8/2WHDkLKpo3g/s900/ricote.jpg"/>
</a>
</li>
<li>
<h4>Bullas. Ciudad de la region de la Comunidad Murciana</h4>
<a href="#">
<img src="https://4.bp.blogspot.com/-dx4GDtQCuCY/U2Y0LT8IlRI/AAAAAAAAPxo/4XW_d21QrMk/s900/bullas.jpg"/>
</a>
</li>
<li>
<h4>Jumilla tambien es de la comunidad de Murcia, creo.</h4>
<a href="#">
<img src="https://4.bp.blogspot.com/-8vVOgYUvpRA/U2Y0LTWXwFI/AAAAAAAAPxs/HPnmp59MYtk/s900/jumilla.jpg"/>
</a>
</li>
<li>
<h4>Jumilla, repiticion de la </h4>
<a href="#">
<img src="https://4.bp.blogspot.com/-8vVOgYUvpRA/U2Y0LTWXwFI/AAAAAAAAPxs/HPnmp59MYtk/s900/jumilla.jpg"/>
</a>
</li>
<li>
<h4>Abanilla tambien es de la comunidad de Murcia, creo </h4>
<a href="#">
<img src="https://4.bp.blogspot.com/-yyHs3e39Tsg/U2Y0LHHoRmI/AAAAAAAAPxk/TnqknfWjR0s/s900/abanilla.jpg"/>
</a>
</li>
<li>
<h4>Abanilla tambien es de la comunidad de Murcia, creo </h4>
<a href="#">
<img src="https://4.bp.blogspot.com/-yyHs3e39Tsg/U2Y0LHHoRmI/AAAAAAAAPxk/TnqknfWjR0s/s900/abanilla.jpg"/>
</a>
</li>
<li>
<h4>Ricote tambien es de la comunidad de Murcia, creo </h4>
<a href="#">
<img src="https://3.bp.blogspot.com/-0VLtdXRmROw/U2Y0MBkDjKI/AAAAAAAAPx8/2WHDkLKpo3g/s900/ricote.jpg"/>
</a>
</li>
</ul>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>