Código de CSS - Efecto Blur con CSS Compatible

Imágen de perfil

Efecto Blur con CSS Compatiblegráfica de visualizaciones


CSS

estrellaestrellaestrellaestrellaestrella(3)
Actualizado el 18 de Marzo del 2018 por ScriptShow (Publicado el 16 de Marzo del 2018)
622 visualizaciones desde el 16 de Marzo del 2018. Una media de 126 por semana
Código en CSS Style para generar un efecto Blur compatible con la mayoría de navegadores web. Al pasar el cursor por el objeto, elemento, etc. se puede apreciar el efecto Blur.

Un saludo

imagen-normal
imagen-con-blur

Requerimientos

Un navegador web y/o dispositivo compatible.

1.0
estrellaestrellaestrellaestrellaestrella(3)

Publicado el 16 de Marzo del 2018gráfica de visualizaciones de la versión: 1.0
623 visualizaciones desde el 16 de Marzo del 2018. Una media de 126 por semana
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

Versión 1.0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<style>
img.blur {
width:480px;
height:auto;
-webkit-filter:blur(4px);
filter:blur(4px);
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='4');
}
img.blur:hover {
-webkit-filter:blur(0px);
filter:blur(0px);
filter:none;
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='0');
}
</style>
</head>
<body>
<img src="imagen.jpg" class="blur">
</body>
</html>



Comentarios sobre la versión: 1.0 (3)

Imágen de perfil
Carlos Luis
16 de Marzo del 2018
estrellaestrellaestrellaestrellaestrella
Muy buen aporte estimad amigo. Muchas gracias!
Responder
Imágen de perfil
xve
16 de Marzo del 2018
estrellaestrellaestrellaestrellaestrella
Que bueno!!!
Responder
Imágen de perfil
miguel
16 de Marzo del 2018
estrellaestrellaestrellaestrellaestrella
No ha dejado ningún comentario
Responder

Comentar la versión: 1.0

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios

http://lwp-l.com/s4486