sábado, 28 de junio de 2014

Los efectos al pasar el cursor sobre una imagen con CSS



1. El funcionamiento

La página de inicio muestra una fotografía de cada orador.


Al pasar el ratón por encima, aparecerá progresivamente un texto de descripción, de abajo hacia arriba:


Ahora podemos ver totalmente la descripción:



2. La estructura

Veamos la estructura de este efecto.

Se ha insertado todo dentro del elemento <a> del vínculo. En ese vínculo, encontramos la fotografía del orador en un elemento <img>. El texto de descripción se encuentra dentro de un elemento <p> que utiliza la clase details. El nombre del orador se incluye dentro de un elemento <strong>.


Fíjese en la "novedad" en cuanto a la imbricación de los elementos. En HTML 4, los elementos estaban clasificados en dos categorías principales en función de su visualización: los elementos de tipo block, que se visualizan uno debajo del otro, y los elementos de tipo inline, que se visualizan en fila, uno al lado del otro. En principio, solamente se podían insertar elementos de tipo block, dentro de otros elementos de tipo block, y los elementos de tipo inline, solamente se podían insertar dentro de elementos de tipo block. En HTML5, estas nociones han quedado obsoletas. Usted puede insertar elementos unos dentro de otros, como usted quiera, siempre y cuando especifique cómo deberán visualizarse con la propiedad display.

En este ejemplo, tenemos un elemento <a> que contiene un elemento <img> y un elemento <p>. Así de sencillo, sin que suponga un problema para la validación.


3. Los estilos iniciales

El nombre del orador utiliza, en especial, una fuente incorporada:

.details strong {
font-family: "Oblik Bold", "Helvetica Neue", Arial, Helvetica,
sans-serif;
font-weight: bold;
font-size: 18px;
display: block;
color: #87BA00;
margin-bottom: 0.2em;
}

El párrafo completo inicialmente está oculto mediante la propiedad display:

.details {
display: none;
}

Las propiedades iniciales del párrafo establecen una visualización en bloque (display: block), con una posición absoluta (position: absolute). El posicionamiento vertical es del 101% (top: 101%) respecto a su elemento padre, el vínculo <a>. De este modo se consigue colocarlo debajo de la imagen incluida en el vínculo. El posicionamiento izquierdo es del 0 % (left: 0) respecto a su elemento padre, el vínculo <a>. De este modo se consigue colocarlo correctamente a la izquierda de la imagen incluida en el vínculo. Por último, el ancho (width: 100%) y el alto (height: 100%) son iguales a los del elemento padre, el vínculo <a>.

.details {
display: block;
position: absolute;
top: 101%;
left: 0;
width: 100%;
height: 100%;
...
}

Las demás propiedades hacen referencia al formato y no intervienen en la transición.


4. Al pasar el cursor sobre el vínculo

Cuando se pase el cursor (:hover) sobre el vínculo (a) se aplicará la transición de la clase .details a los párrafos. La propiedad que varía es el posicionamiento vertical, que pasará al 60% (top: 60%), como siempre, respecto a su elemento padre <a>.

a:hover .details {
top: 60%;
}

Esta transición está definida en el selector correspondiente: .details. La transición de la nueva posición vertical durará 0,3 segundos (transition: 0.3s) :

.details {
display: block;
position: absolute;
top: 101%;
left: 0;
width: 100%;
height: 100%;
...
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
transition: 0.3s;
}


Espero haber ayudado en algo. Hasta la próxima oportunidad!







No hay comentarios:

Publicar un comentario en la entrada