1

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 divcomo 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>

1
  • A ver, el texto, a menos que reduzcas su tamaño no vas a poder reducir el tamaño del div. Pero ese no es el problema, el problema reside en que la posición por defecto, es la de ocupar toda la pagina, lo que tienes que hacer seria posicionar tu el div, para que comience donde le has dicho. Solo se me ocurriría con un Position:Absolute y tu mas o menos posicionarlo (Con el consiguiente trabajazo que te llevaría) o con un relative, pero te tocaria editar bastante código. Te lo digo tambien así rápido, porque toca editar bastante css y no creo que lo deje como te interesaría. Commented el 24 feb. 2018 a las 0:15

2 respuestas 2

2

Lo que yo quería conseguir es que al principio estuviera recogida la lista en el centro del div como en la imagen.

En la clase .my_settings, está esta variable:

/*Ancho de cada pestaña*/
--x: calc( 100% / var(--n) );

Significa que el ancho de cada pestaña, corresponde al 100% de todo el acordeon, dividido entre var(--n), que es el número de pestañas en el acordeón.

Ahora si quieres que sea más pequeña, solo debes cambiar ese valor, prueba con:

--x: 5%; /*O el porcentaje o medida que desees. Ej: 15px, 2em, ect*/

Lo mismo con esta otra variable:

--x1: calc(var(--x) / 2); 

Que calcula automáticamente la mitad del ancho escogido para la pestaña, para que cuando se haga hover sobre el acordeón se achiquen las pestañas más aún y si colocas aún más alto el número a la derecha, más pequeñas se vuelven. Ahora si no quieres que se achiquen más, simplemente cambia el 2, por un 1 o di que es el mismo tamaño que la primera variable. Así:

--x1: calc(var(--x) / 1); /*Es decir lo divide entre 1*/

--x1: var(--x); /*Lo de arriba y esto es lo mismo*/

las frases estuvieran en una sola línea en vertical, no en varias líneas como ahora.

Esto ocurre, porque usas muchas líneas en un espacio tan reducido, es decir tu ejemplo con la imagen no concuerdan. ¿Se puede solucionar? SI y es facil, 1ro tendríamos que relacionar la altura del acordeón con el ancho de cada texto. Así:

--y: 450px; /*O lo que veas que cuadra*/

Ahora nos vamos hasta el título de cada pestaña y le añadimos el ancho con nuestra variable:

.acordeon h4{
  width: var(--y);
}

Con esto le decimos que el ancho de cada título es igual a la altura del acordeón y solucionado!!

Ah, pero espera, aún falta definir que cuando se haga hoveren la pestaña, su título no se quede con el ancho anterior, sino que recupere el tamaño original, es decir el 100% del contenedor y esto lo hacemos ubicando el selector que se encarga de esto, es decir:

.acordeon li:hover h4{
  width: 100%;
}

Y listo. Revisa y me avisas si es lo que querías. Ejemplo:

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 {
  font-size: 0.8em;
  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: 1.5em; 
  /*Altura del acordeon*/
  --y: 380px; /*puedes colocarlo en pixeles, em o lo que quieras*/
  /*Opcional: Ancho de pestañas no seleccionadas al momento de agrandar*/
  --x1: calc(var(--x) / 1); /*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: #f9f9f9;
  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%;
  width: var(--y);
  transform-origin: 0% 100%;
  transform: 
    translateY(-1em)
    translateX(.25em)
    rotateZ(90deg);
}

.acordeon li:hover h4{
  padding-left: .5em;
  color: white;
  min-width: 100%;
  width: 100%;
  transform: rotateZ(0deg);
  background: rgba(100,255,100,.8);
}

.acordeon li img{
  position: relative;
  width: 100vw;
  height: 75vw;
  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>

Cualquier cosa, escríbeme en los comentarios. Éxitos!

1
  • Gracias compañero @Edgar Gutiérrez ,ya tengo para estudiar otro rato. Muy explicitas tus explicaciones. Commented el 24 feb. 2018 a las 1:49
2

Para poner el texto en una sola línea basta con agregar white-space:nowrap; en el h4. Comenté .acordeon:hover li porque cambia el ancho de las barras, pero puedes descomentarlo si te gusta el efecto.

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( 60% / 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;
  white-space:nowrap;
  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>

1
  • Gracias @Triby tu respuesta es igual de buena, pero lei lo que escribió Edgar y ya me quede con esa respuesta. Solo se puede marcar una... Igualmente agradecido.. Commented el 24 feb. 2018 a las 1:58

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.