Efectos con hover y transition en CSS (parte 2) -Filtros-
- Andrés Cruz
En la entrega anterior Efectos con hover y transition en CSS (parte 1) vimos como crear un curioso overlay sobre nuestras imágenes; en esta entrada veremos cómo emplear los Filtros en CSS3 en conjunto con las transiciones sobre imágenes permiten crear efectos muy llamativos para los filtros soportados:
Creando nuestro efecto
Como podrás haber notado; las imágenes por defecto tiene un filtro aplicado, y al posicionar el cursor encima de las mismas el filtro es removido de manera progresiva dando como resultado un efecto atractivo a través de las Transiciones en CSS.
CSS de las imágenes (Filtros y Transiciones)
Primero definiremos el CSS base del contenedor y de las imágenes:
.cuerpo {
width: 30%;
height: 200px;
margin:30px 7px;
float:left;
transition:1s all;
}
.cuerpo img{
width:100%;
height:inherit;
object-fit: cover;
box-shadow: 0 0 20px #999;
border:2px solid #333;
}
.grayscale{
-webkit-filter: grayscale(100%);
}
.hue-rotate{
-webkit-filter: hue-rotate(220deg);
}
.sepia{
-webkit-filter: sepia(100%);
}
.contrast{
-webkit-filter: contrast(190%);
}
.saturate{
-webkit-filter: saturate(50%);
}
.blur{
-webkit-filter: blur(10px);
}
.invert{
-webkit-filter: invert(100%);
}
.brightness{
-webkit-filter: brightness(0.25);
}
.opacity{
-webkit-filter: opacity(34%);
}
Nuevamente empleamos la propiedad object-fit
para cambiar la relación de aspecto hablado en una entrega anterior; de esta manera podemos trabajar fácilmente con imágenes de distintas relaciones de aspecto sin distorsionar las mismas.
CSS de las imágenes (:hover)
Y como comentamos al inicio de esta entrada, el CSS para el :hover
simplemente remueve los filtros CSS definidos en la sección anterior:
.hue-rotate:hover{
-webkit-filter: hue-rotate(0deg);
}
.brightness:hover{
-webkit-filter: brightness(1);
}
.sepia:hover{
-webkit-filter: sepia(0);
}
.saturate:hover{
-webkit-filter: saturate(1);
}
.opacity:hover{
-webkit-filter: opacity(1);
}
.invert:hover{
-webkit-filter: invert(0);
}
.grayscale:hover{
-webkit-filter: grayscale(0);
}
.contrast:hover{
-webkit-filter: contrast(100%);
}
.blur:hover{
-webkit-filter: blur(0px);
}
Puedes descargar el experimento completo en los siguientes enlaces:
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter