En esta entrada veremos cómo emplear los Filtros en CSS en conjunto con las transiciones sobre imágenes permiten crear efectos muy llamativos para los filtros soportados.

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: