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.
[xyz-ihs snippet=”SuscripcionPost”] [xyz-ihs snippet=”final-post”]Estés donde estés, si necesitas un página web en WordPress, tienda online Woocemmerce, Desarollo de un plugin para WordPress, campañas de Google Ads, Shopping y Remarketing, así como una estrategia SEO 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.
Sara
Buen día, es posible que antes de lograr el filtro sepia se pueda agregar un efecto de background en blanco, y antes de terminar la sepia tambien se ponga le background blanco antes de dar paso a la imagen original?
Covalenciawebs
BUenos días. Disculpa por el retraso, no lo habíamos visto. Lo que quieres hacer puede hacerse pero mediante animación CSS. Es un poco más complejo. Primero tienes que crear los pasos de la animación y depués en los estilos del hover poner la animación a realizar.
Un ejemplo sería algo así:
p {
animation-duration: 3s;
animation-name: changecolor;
}
@keyframes changecolor {
0% {
background-color: cyan;
opacity: 1;
}
25% {
background-color: lightblue;
opacity: 0.7;
}
50% {
background-color: green;
opacity: 0.7;
}
100% {
background-color: yellow;
opacity: 1;
}
}