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

02-07-2015 - Andrés Cruz

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

Este material forma parte de mi curso y libro completo; puedes adquirirlos desde el apartado de libros y/o cursos.

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:


Andrés Cruz
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.

Conozca nuestros cursos sobre Laravel, CodeIgniter, Flutter, Electron, Django, Flask y muchos más!

Ver los cursos
¡Hazte afiliado en Gumroad!

!Cursos desde!

4$

En Academia

Ver los cursos

!Libros desde!

1$

Ver los libros
!Web Alojada en Hostinger!