Efectos con hover y transition en CSS (parte 2) -Filtros-

• Categorías
• /
• HTML
• /
• Efectos con hover y transition en CSS (parte 2) -Filtros-

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: