Como mostrar contenido en filas expandibles con solo CSS

• Categorías
• /
• CSS
• /
• Como mostrar contenido en filas expandibles con solo CSS

En una entrega pasada mostramos como mostrar contenido en columnas expandibles con solo CSS; vimos cómo mostrar contenido adaptable mediante columnas expandibles; en esta nueva entrega, veremos una variable de este ejercicio anterior, el cual consiste en mostrar contenido por filas en vez de columnas; sin embargo mantendremos el mismo principio.

Recordando un poco el propósito de estos ejercicios, es el de poder mostrar contenido, de manera atractiva y sencilla sin muchas complicaciones (como vimos en el artículo anterior y como veremos también en este, el HTML y CSS es realmente sencillo); el funcionamiento sigue siendo sencillo; al posicionar el cursor encima de alguna fila, se expandirá y mostrará el contenido oculto por defecto.

Definiendo el HTML

Las filas serán un total de cuatro; pero por supuesto, pueden ser más o menos, depende de las necesidades; para ello utilizaremos los divs:

        <div>
                <p>Android</p>
                <img src="android.png"/>
        </div>
     	<div>
                <p>Windows Phone 8</p>
                <img src="windows-8-phone.png"/>
        </div>
     	<div>
                <p>IOS</p>
                <img src="ios.png"/>
        </div>
     	<div>
                <p>BlackBerry</p>
                <img src="blackberry.png"/>
        </div>

Definiendo el CSS

Nuevamente el CSS es corto y muy sencillo de entender; veamos ciertas secciones claves:

Definiendo las filas

            body {
    color: rgba(255, 255, 255, 0); /*invisible*/
                margin: 0;
                background: #f25648;
            }
            div img{
                opacity:0;
                width:8%;
                height:auto;
                display: block;
                margin: 1% auto;
                transition:opacity 1s; 
            }
            div:hover img{
                opacity:1;
            }
            div {
                transition:height 1s,color 1s; 
            }
            div:hover{
                height:40%;
                color:rgba(255, 255, 255, 1);
            }
            div:nth-child(1) {
                background: #aaAA33;
            }
            div:nth-child(2) {
                background: #22AAff;
            }
            div:nth-child(3) {
                background: #EEEEEE;
            }
            div:nth-child(4) {
                background: #111111;
            }
            div:hover {
                color: rgba(255, 255, 255, 1);
            }

Puntos claves:

• El HTML anterior esta compuesto de un nombre y de una imagen; que corresponden al contenido que se desea mostrar.
• Definir un color para cada fila.
• Definir todas las filas representados por los divs para que en conjunto ocupen un 80% alto (height) de la pantalla y siempre el 100% de ancho (width); de esta forma al ampliarlos ocupen el 20% restante.
• Definir un color de fondo en el body para el 20% restante del documento (que no es ocupado por ningún div); de esta forma parecerá un componente más de las filas pero este no mostrará ningún contenido ni efecto, el porqué de esto se debe a que este espacio será ocupado el div al momento de su expansión.
• La transición nos permiten que un elemento cambia gradualmente (en un tiempo determinado) de un estilo a otro recordando; artículo pasado Introducción a las Transiciones en CSS; con el código HTML y CSS anterior obtenemos el siguiente resultado:

Resultado Final