Discussion :

[iVBAveADream]

Bonjour,

je me remets doucement à CSS et HTML pour mon site perso.
Jusque-là la recherche m'a suffit mais je tombe sur un sujet plus épineux ^^

au survol de la souris sur un div, je voudrais que l'image (mise en tant que background-image) se floute et que le texte de mon choix s'affiche par dessus :

je suis donc parti sur un html assez simple :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<div class="box"><h4>Impression 3D</h4></div>

et le css suivant :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
.box {
  height: 350px;
  width: 350px;
  background: url("https://nlng.fr/img/bg_construct.png");
}
 
h4{
  opacity:0;
}
 
.box:hover h4{
  transition: 0.1s ease;
  opacity:1;
}
 
.box:hover{
  transition: 0.1s ease;
  -webkit-filter: blur(5px);
	filter: blur(5px);
}

j'ai fait un codepen ici : https://codepen.io/cptbourg/pen/OJOOMba
j'ai essayé de jouer avec zindex,
backdrop-filter ne fonctionne pas sous firefox,
j'ai mis un blur à 0 dans .box:hover h4bref je suis bloqué

[NoSmoking]

Bonjour,

backdrop-filter ne fonctionne pas sous firefox,

cela fonctionne mais il faut modifier la configuration donc jamais franchement utilisable.

Il te faut changer la structure en place.
Plusieurs solutions possibles, comme d'habitude, une sur base d'un élément <figure>, pour la sémantique mais c'est idem avec des <div>, et une en utilisant un pseudo-élément :before par exemple.

Sur base figure :
le HTML :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<figure class="box-figure">
  <img src="https://nlng.fr/img/bg_construct.png">
  <figcaption>Impression 3D</figcaption>
</figure>

et le CSS associé :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.box-figure {
  position: relative;
  width: 350px;
  height: 350px;
  overflow: hidden;
}
.box-figure figcaption {
  position: absolute;
  top: 0;
  font-size: 2em;
  font-weight: 700;
  opacity: 0;
  transition: opacity .3s ease;
}
.box-figure img {
  transition: .3s ease;
}
.box-figure:hover img {
  filter: blur(5px);
}
.box-figure:hover figcaption {
  opacity: 1;
}

Sur base pseudo-élément :
le HTML :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div class="box-before">
  <h4>Impression 3D</h4>
</div>

et le CSS associé :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
.box-before {
  position: relative;
  width: 350px;
  height: 350px;
  overflow: hidden;
}
.box-before h4 {
  position: relative;
  margin: 0;
  font-size: 2em;
  font-weight: 700;
  opacity: 0;
  transition: opacity .3s ease;
}
.box-before::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: url("https://nlng.fr/img/bg_construct.png");
  transition: .3s ease;
}
.box-before:hover::before {
  filter: blur(5px);
}
.box-before:hover h4 {
  opacity: 1;
}

Beaucoup de points communs dans ces deux solutions.

[iVBAveADream]

Bonsoir NoSmoking,

premièrement, merci beaucoup pour ton temps, je viens enfin de prendre le temps de comprendre les deux solutions

pour la partie <img> dans le html, c'est très intéressant puisque j'apprends pas mal de choses en plus! overflow et la balise <figure> notamment.
ca me resservira forcément quand je me déciderais à intégrer un peu de php pour gérer mes images!
pas de soucis de compréhension sur la partie css

Pour la version avec pseudo-éléments, déjà j'ai un gros boulot à faire pour comprendre leur principes, mais surtout les petits contournements qu'ils semblent pouvoir permettre
(je commence ici : https://developer.mozilla.org/fr/doc...seudo-elements mais ce n'est pas encore très clair ^^ )

par contre je pense que tu as nommé la classe "box-before" et pas juste "box" pour une bonne raison, mais j'ai dû mal à voir pourquoi?
merci beaucoup pour la solution en tout cas, avec pleins de détails très formateurs!

[NoSmoking]

par contre je pense que tu as nommé la classe "box-before" et pas juste "box" pour une bonne raison, mais j'ai dû mal à voir pourquoi?

pas de raison spéciale si ce n'est que si tu mets tous ces codes dans une même page test cela te permets de t'y retrouver et de savoir rapidement ce qui est appliqué à telle ou telle partie

[iVBAveADream]

ok c’est bien ce qui m’avait échappé ^^
merci