DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
11-08-2014

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:

Resultado Final


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Css3 Spinners

Css3 Spinners

Un waffle con CSS

Un waffle con CSS

Loader Battlenet

Loader Battlenet

Algunos artículos que te pueden interesar

La pseudo-class :checked en CSS

La pseudo-class :checked en CSS

El selector de la pseudo-class :checked representa (permite seleccionar) a cualquier elemento HTML radio, checkbox u option.

Andrés Cruz 26-01-2015

¿Cómo hacer una sencilla galería con CSS y 6 líneas de JavaScript?

¿Cómo hacer una sencilla galería con CSS y 6 líneas de JavaScript?

En esta entrada explicaremos como crear una sencilla galería empleando CSS y seis (6) líneas de JavaScript.

Andrés Cruz 12-02-2015

¿Cómo crear un carrusel con CSS #Infografia?

¿Cómo crear un carrusel con CSS #Infografia?

En esta entrada veremos cómo crear un carrusel con solo CSS en una infografía.

Andrés Cruz 24-09-2015