Psychotik

solucionando marrones desde 2003

Desenfocar imágenes con CSS

Pertenece a  Tips  el 5 febrero
Desenfocar imágenes en CSS

La propiedad filter nos permite aplicar algunos efectos a nuestras imágenes, para conseguir desenfocar imágenes nada mejor que aplicarle el valor blur para conseguirlo fácilmente, le damos un valor en “px” y solucionado:

Código CSS:

/* En este caso vamos a aplicar el filtro de desenfoque al hacer :hover */
.desenfocar:hover{
   filter: blur(2px);
   -moz-filter: blur(2px);
   -webkit-filter: blur(2px);
   -o-filter: blur(2px);
   -ms-filter: blur(2px);
}

Resultado:

Desenfocar imágenes en CSS

Hay que recordar que el valor blur, al igual que otros efectos, se puede aplicar tanto a etiquetas de bloque (en el ejemplo se está usando con un ‹div›), con ‹img› o fondos, así que todo es cuestión de la imaginación que le queráis dar.


Volver atrás

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

¡Lo está petando!

Volver arriba
Utilizamos cookies para garantizar que tu experiencia en Psychotik sea la mejor posible
Saber más sobre nuestras galletitas »