• +
    • Siguenos en feedly

Pídenos información

Nombre:*

E-mail:*

* Campos obligatorios

Teléfono:

¿En qué te podemos ayudar?

Animando nuestro diseño web: hover, transition y overflow

animando diseño web
Tener elementos de la web que cambian cuando el usuario interactua con ellos (pasando el cursor por encima, por ejemplo) le da a la página web más dinamismo y gracia. Con las propiedades CSS, hover, transition y overflow, y sin necesidad de emplear JavaScript, podemos entretenernos animando nuestro diseño web con efectos sencillos pero resultones. Para explicarlo vamos a utilizar como base el siguiente ejemplo, en el que al pasar el ratón por encima nos aparece información de la foto:

Cabo de Gata

Partimos de un div que contiene una imagen y al ponernos sobre la imagen nos aparece un texto explicativo de la foto y la imagen se vuelve de color sepia.
Lo primero que haremos es definir el html, que es muy sencillo. Crearemos un div que contendrá la imagen y el texto:

<body>
 <div id="box">
    <img src="cabo-de-gata.jpg"/>
    <p>Cabo de Gata</p>
 </div>
</body>

Ahora pasamos a definir los estilos. Al div le ponemos el ancho y alto de la imagen. Esto no se ajusta a las reglas para que nuestro diseño sea responsive, pero lo haremos así por simplificar. Al párrafo le asignamos los estilos que queramos (tamaño de texto, grosor, fondo…). Para el ejemplo utilizaremos el posicionamiento relativo (position:relative) para que el párrafo esté debajo de la imagen y después podamos moverlo. Nos quedará algo así:

#box {
 width: 400px;
 height: 220px;
}

#box p{
 position: relative;
 font-weight: bold;
 line-height: 45px;
 text-align: center;
 margin: 0;
 color: white;
 background-color: rgb(0, 0, 0);
 background-color: rgba(0, 0, 0, 0.6);
}

Cabo de Gata

No os preocupéis porque el texto quede fuera de la imagen, después lo arreglaremos.

Primer paso de la animación: hover

Lo que queremos hacer es que el párrafo suba hasta la parte inferior de la imagen y que el tamaño de la fuente se haga más grande. Para conseguirlo debemos cambiar los estilos del párrafo cuando el cursor esté encima del div, o sea, #box:hover p { … }

#box:hover p {
 top: -45px;
 font-size: 20px;
}

Para que la imagen se vuelva sepia aplicamos lo mismo, #box:hover img { … }

#box:hover img {
 -webkit-filter: sepia(1);
 filter: sepia(1);
}

Cabo de Gata

Segundo paso de la animación: transition

Ya tenemos la posición inicial y final definidas, pero nos falta darle un poco de animación para que tenga gracia. La propiedad transition es ideal para esto. No entraremos a analizar todas sus propiedades, sólo lo esencial que necesitamos para el ejemplo.
Para poder aplicar correctamente esta propiedad es importante tener en cuenta dos cosas:
– Se debe colocar en el selector del estado inicial (#box p), no en el del final (#box:hover p).
– La propiedad que se quiere animar debe estar definida en ambos selectores.
Siguiendo estos pasos, lo primero que haremos será incluir las propiedades en los selectores del estado inicial, si no lo están ya (top, font-size y filter):

#box p{
 position: relative;
 font-weight: bold;
 line-height: 45px;
 text-align: center;
 margin: 0;
 color: white;
 background-color: rgb(0, 0, 0);
 background-color: rgba(0, 0, 0, 0.6);
 top: 0;
 font-size: 15px;
}

#box img {
 -webkit-filter: sepia(0);
 filter: sepia(0);
}

Ahora añadimos la propiedad transition (y -webkit-transition, por compatibilidad con navegadores). El modo de hacerlo es nombrando la propiedad que va a animarse y su duración, separando cada propiedad por comas:

#box p{
 position: relative;
 font-weight: bold;
 line-height: 45px;
 text-align: center;
 margin: 0;
 color: white;
 background-color: rgb(0, 0, 0);
 background-color: rgba(0, 0, 0, 0.6);
 top: 0;
 font-size: 15px;
 transition: top 0.5s, font-size 0.5s;
 -webkit-transition: top 0.5s, font-size 0.5s;
}

#box img {
 -webkit-filter: sepia(0);
 filter: sepia(0);
 transition: filter 0.5s;
 -webkit-transition: -webkit-filter 0.5s;
}

Otro modo más sencillo es escribiendo “transition: all 0.5s”, que aplica la transición a todas las propiedades que aparezcan en ambos selectores. Y ya tenemos hecha la animación:

Cabo de Gata

Tercer paso de la animación: overflow

Ya sólo nos queda arreglar el párrafo que queda fuera de la imagen. Con la propiedad overflow:hidden aplicada al div lo tendremos resuelto. Lo que hace es ocultar todo aquello que sobrepasa los límites del div. Esto nos permite hacer efectos de movimiento sin invadir otros elementos de la página.

#box {
 width: 400px;
 height: 220px;
 overflow: hidden;
}

Y ya tenemos el ejemplo resuelto:

Cabo de Gata

Como puedes ver es bastante sencillo conseguir animar ciertas partes de la web aplicándoles una transición, con lo que las posibilidades de crear efectos se multiplican.

¿Quieres 3 plantillas gratuitas?

tres plantillas gratuitas
  • Calendario editorial RRSS.
  • Informe resultados RRSS.
  • Check list SEO Moz.
* Campo obligatorio

Estés donde estés, si necesitas un sitio web, tienda online, campañas de e-mailing, gestión de tus redes sociales, video marketing o diseño gráfico, no dudes en contactar con nosotros (Equipo de diseño web ubicados en Valencia) a través de nuestro formulario y te informaremos al respecto.

Share on FacebookTweet about this on TwitterShare on Google+Buffer this pageShare on LinkedIn

Deja tu comentario

*

¿Quieres nuestro ebook?

ebook analytics gratuito

Configuración Extra de Google Analytics: Sácale el máximo partido a tu cuenta


* Campo obligatorio

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. En ningún caso serán cedidas a terceros. Si continúa navegando está dando su consentimiento para la aceptación de las cookies y la aceptación de nuestra política de cookies.

CERRAR