28172 sujets

CSS et mise en forme, CSS3

Blur background

Hello,

Sur une page d'accueil d'un site, j’aimerai que lorsque la souris survole un element (un div), celui grandisse légèrement et l’arrière plan soit flou.
Pour le faire grossir, ça marche sans soucy, j'utilise un petit code css suivant.

.item:hover {

transform: scale(1.02);
}

Par contre le problème c'est pour rajouter le flou. Si je rajoute une ligne css : filter:blur(5px),
ca marche nickel sauf que c'est l’élément qui est flou.

Moi je voudrai tout l'inverse : que lorsque la souris est desssus : l’élément est net et tout le reste est flou. J'avoue que le bloque, avez-vous une idée pour tout passer au flou sauf l'element en question ?

Merci de votre aide, c'est sur cette page.
www.tlcprod.info
Bonjour,
en utilisant un overlay ? Ce ne sera pas vraiment flou mais moins visible tout de même.
Smiley smile
Hélas non. Ce n'est pas aussi simple...
Les filtres ont un comportement qui force l'héritage d'une manière un peu particulière : ce n'est pas la propriété qui est héritée, mais leurs effets qui s'appliquent sur l'ensemble des éléments visibles qu'ils contiennent. Ils ne peuvent donc pas être retirés sur les enfants.

https://stackoverflow.com/questions/28975673/how-to-blurcss-div-without-blur-child-element

En gros, si tu veux appliquer ton filtre "blur" ici, il va forcément falloir dissocier ce que tu appelles ton "arrière-plan" (le body j'imagine) du contenu survolé. Donc faire un container qui sépare les items à survoler du reste du contenu, et les ranger sur le même niveau. Par exemple un bloc de classe "main-container" qui contient le contenu de ta page hormis les items à survoler, et "items-container" qui contient les éléments à survoler.

Ensuite en JS, tu balances une classe, par exemple "blur-active" sur ton body au survol d'un item, et tu ajoutes à l'item survolé une classe "active". Et tu changes le comportement en css de la sorte :


.main-container, .items-container .item {
   transition: filter 0.2s; /* Pour faire une petite transition */
}
body.blur-active .main-container { 
   filter: blur(5px);
}
body.blur-active .items-container .item:not(.active) {
   filter: blur(5px);
}


Bien sûr quand tu ne survole plus l'item, coté JS, il faut que ces classes ajoutées soient retirées. Smiley cligne
Modifié par Nolan (14 Jun 2018 - 17:13)
Hello,

Merci pour vos réponses.

Effectivement j'ai fait un petit test et si je met flou au body....tout le reste est flou meme si j'applique un parametre 0 à l'element en lui-meme....

Je suis vraiment null en javascript, je suis amateur donc on verra si j'y arrive, cetait plus histoire de m'amuser qu'autre chose meme le probleme est interessant.

J'avais espere trouver un petit trick css pour ca soit ps trop compliquer mais ca a l'air de l'etre un peu.

Je fais des test merci en tout cas !!!
Wollsale a écrit :
J'utiliserais soit du Javascript, soit du CSS.

L'idée en JS, c'est de dire : "au survol, ajoute un Blur sur tout les éléments sauf celui qui est survolé", avec une boucle dans ton les éléments.

En CSS, c'est un peu "tricky" : je dirais qu'au survol de la div qui englobe tes 4 divs, les 4 éléments, et au survol d'un élément, rendre celui-ci net.

Un peu comme cet exemple quoi : https://codepen.io/wollsale/pen/eVMLBg
(au survol du menu, tout est en opacité 0.5, au survol d'un élément, ce dernier est en opacité 1)

Je vais essayer mais le problème est qu'ne faisant deux tests rapide, j'ai pas l'impression que le blur soit "oerride" comme l'opacité, en resume si le parent est blur est que l'enfant on lui met un css blur a 0 beh ca marche pas...
Sujet clos
Aller à