Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá, estava querendo aplicar um efeito blur em todo o body, menos em uma div, tentei mais ou menos assim, mas não funcionou :/ as duas imagens ficam com o efeito blur
<html>
<head>
<style>body:hover {
-webkit-filter: blur(10px);
filter: blur(0px);
}
#semefeito {
-webkit-filter: blur(0px);
filter: blur(0px);
} -webkit-filter: blur(0px);
filter: blur(0px);
}
</style>
</head>
<body>
<div><img width=300 src="http://oi44.tinypic.com/1ymkup.jpg"></div>
<div id="semefeito"><img width=300 src="http://oi44.tinypic.com/1ymkup.jpg"></div>
</body>
</html>Olha que eu não sabia, foi de grande conhecimento essa informação, vlw Henrique
Walter,
Veja essa DEMO que preparei no JSFiddle. Se você quiser adicionar blur no body e não a um elemento filho, é só adicionar a propriedade :not no CSS. Exemplo:
body >:not(.suadiv) {
O filter vai ser atribuído para o body e não será atribuído a .suadiv.
Abraços!