DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
02-07-2015

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:


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Eye Candy

Eye Candy

Referencia de las propiedades CSS más empeladas

Referencia de las propiedades CSS más empeladas

Animación Torus solo con HTML y CSS

Animación Torus solo con HTML y CSS

Algunos artículos que te pueden interesar

La pseudo-class :checked en CSS

La pseudo-class :checked en CSS

El selector de la pseudo-class :checked representa (permite seleccionar) a cualquier elemento HTML radio, checkbox u option.

Andrés Cruz 26-01-2015

La pseudo-class nth-child en CSS

La pseudo-class nth-child en CSS

La pseudo-clase nth-child identificar un elemento dentro de una lista de etiquetas.

Andrés Cruz 16-07-2013

¿Cómo hacer una simple galería responsive con CSS 1?

¿Cómo hacer una simple galería responsive con CSS 1?

En esta entrada veremos como hacer una simple galería responsive empleando un poco de CSS y nada más.

Andrés Cruz 10-11-2014