Cómo poner borrosa o desenfocada una imagen con CSS (Filtro Blur)

Desenfocando una imagen con CSSfilter es una propiedad del #css que permite cambiar o manipular en tiempo real los efectos visuales de un elemento (Por lo generar de una imagen). En este ejemplo veremos cómo usar la función blur para desenfocar una i...
Publicado
Actualizado
Engagements 0 Comentario

Desenfocando una imagen con CSS

filter es una propiedad del css que permite cambiar o manipular en tiempo real los efectos visuales de un elemento (Por lo generar de una imagen). En este ejemplo veremos cómo usar la función blur para desenfocar una imagen que está establecida como fondo (background) de un div cuando se pasa el mouse (cursor) sobre ella.

<div id="myDiv"></div>
div#myDiv{
          width:500px;
          height:500px;
          background: url('https://placeimg.com/640/480/any') no-repeat;
          background-size:cover;
        }
        div#myDiv:hover{
          filter:blur(10px);
        }  

Ejemplo un poco más elaborado en codepen

 

Ver ejemplo en codepen

Comprar y Vender criptomonedas nunca fue tan fácil

Entra y compruebalo, dale click en la siguiente imagen.

Comentarios