En esta publicación se expone la aplicación del efecto desenfoque en CSS aplicado a una imagen,
Resaltando ciertos elementos con el efecto desenfoque en CSS
El Css es el siguiente:
.imagen:hover {filter: blur(5px);}
😉 De seguido se anexa la adición del código CSS en el interno de la imagen:
La imagen que resulta se expone a continuación. Al pasar el ratón por encima de ella, se aprecia el efecto del filtro:
_____________-
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
