DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
21-07-2014

Cuando desarrollamos una página web con el propósito de mostrar cierto contenido clave o información nos vemos en la obligación de mostrarla en una forma sencilla, elegante y sin muchas complicaciones; en este artículo veremos una de estas formas, la cual consiste en mostrar el contenido en columnas, que al posicionarnos sobre ellas se expanden y nos muestra el contenido:

Definiendo el HTML

Nuestras columnas serán un total de cuatro; pero por supuesto, pueden ser más o menos, depende de las necesidades; para ello utilizaremos una lista ul:

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

Definiendo el CSS

El CSS es realmente corto y sencillo; veremos ciertas secciones claves:

Definiendo las columnas verticales

            body {
                background: #f25648;
            }
            li img{
                opacity:0;
                transition:opacity 1s; 
            }
            li:hover img{
                opacity:1;
            }
            li {
                margin: 0;
                padding: 0;
                list-style: none;
                width:20%;
                height:100%;
                transition:width 1s,color 1s; 
            }
            ul {
                margin: 0;
                padding: 0;
                height:100%;
            }
            li:hover{
                width:40%;
                color:rgba(255, 255, 255, 1);
            }
            li:nth-child(1) {
                background: #aaAA33;
            }

            li:nth-child(2) {
                background: #22AAff;
            }

            li:nth-child(3) {
                background: #EEEEEE;
            }

            li:nth-child(4) {
                background: #111111;
            }
            li:hover {
                color: rgba(255, 255, 255, 1);
            }

Puntos claves:

Resultado Final


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Loader Battlenet

Loader Battlenet

Css3 Spinners

Css3 Spinners

Hover over the cards

Hover over the cards

Algunos artículos que te pueden interesar

Carrusel fullscreen con menú lateral con jQuery y CSS

Carrusel fullscreen con menú lateral con jQuery y CSS

Se explica cómo crear una galería fullscreen o pantalla completa con un menú fijo lateral con jQuery y CSS.

Andrés Cruz 18-05-2017

Guía rápida sobre el background en CSS (parte 1)

Guía rápida sobre el background en CSS (parte 1)

Esta propiedad es la forma abreviada para establecer las demás propiedades relacionadas incluyendo aquellas relacionadas con el color e imagenes de fondo de un elemento; es decir, aquellas cuyo prefijo es background-.

Andrés Cruz 19-02-2014

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