Mettre une image(div) en 1er plan d'un fond animé(div)

**el_debutanti** · 09/02/2023, 14h48

Bonjour,
Je cherche à mettre une image (fixe) sur un fond animé.
Mais rien apparaît (je parle de "zozo", l'image fixe)

Alors, mon

Code html :

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

1
2
<div id="imgtourne" class="image3"><img src="images/fontourne.jpg"  alt="affiche" class="imgtourne"></div>
<div class="imgtourne><div>class="zozo><img src="images/zozo.png"></div>

et mes CSS :

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
#imgtourne {
 
  overflow: hidden;
  height: 500px;
  width: 380px;
  position: relative;
}
figure {
  margin: 0;
}
.imgtourne {
  width: 200%;
	height:100%;
	margin-left: -50%;
  transform-origin: center;
  transform: scale(2);
  animation: spin 4s linear infinite;;
  position: absolute;
}
@-webkit-keyframes spin {
  100% {
    -webkit-transform: scale(2) rotate(360deg);
  }
}
 
@keyframes spin {
  100% {
    transform: scale(2) rotate(360deg);
  }
}
 
.zozo {z-index: 9999999;
background-image: url("../images/zozo.png");}
 
.titre_psyche {color: white;
font-size: 10em;
text-shadow: #FF69B4 10px 0 10px;
letter-spacing: .2rem;
text-align: center;
display: block;}
 
.vignettes {
	width: 100%;}
 
 
 
figure {
  position: relative;
  display: inline-block;
  overflow: hidden;
		margin: 0;
 
}
 
figcaption {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  cursor: pointer;
  text-align: center;
  vertical-align: text-bottom;
  color: black;
  background-color : rgba(0,0,0,0.5);
  padding-top: 30%;
	font-family: 'clovis_cheuryregular', Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
  opacity: 0;
  transition: opacity 1s ease;
	font-size: 3em;
}
figure:hover figcaption {
  opacity: 1;
}

Figcation, car à l'origine, sur l'image en premier plan, il y avait une figcation (que j'aimerais conserver si cela est possible).
Pour résumer : une image détourée avec figcaption avec derrière un fond animé.

Merci pour votre aide

ED

**el_debutanti** · 10/02/2023, 11h32

Bonjour,
Pour le moment, je n'arrive qu'à mettre une image devant l'autre.

Code html :

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

1
2
3
4
5
6
7
    <div class="parent">
      <div class="child1"   <figure><figcaption>
      <strong>Binet</strong>
    </figcaption>
	  </figure></div>
      <div class="child1 child2"></div>
    </div>

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
.child1 {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
 background-image: url("../images/asiat.jpeg");
 background-size: cover;}
.child2 {
    z-index: 1;
 background-image: url("../images/zozo.gif");
 background-size: cover;}

La seule chose que j'ai réussi à faire, c'est appliquer la classe "imgtourne" à child 1, mais c'est child2 qui tournait... en mode "cover" (toute la page).
Je ne pense pas pouvoir mélanger les classes (avec et sans rotation).
Est-ce possible ?
Merci et bonne journée,
ED

**el_debutanti** · 10/02/2023, 12h04

Avec cela, j'y arrive presque (attention, je ne comprends pas forcement tout) :

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
29
30
31
32
33
34
.parent {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 10px;
	float: left;
}
.child1 {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
 background-image: url("../images/asiat.jpeg");
 background-size: cover;
border-radius: 100px;
margin-left: 0px;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
 
 
 
 
.child2 {
    z-index: 1;
 background-image: url("../images/zozo.gif");
 background-size: cover;
 position:absolute;
transform: scale(0) translate(0);}

Mais le child2 (zozo.gif) s'affiche par intermittence... "clignote" lentement.
Je ne pense pas être loin.
Merci,
ED

**el_debutanti** · 10/02/2023, 12h29

Code :

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

transform: scale(100%) translate(0%);

C'est bon pour l'image de devant, mais c'est le bloc derrière qui tourne. Comment faire pour que ce ne soit que l'image ?
Merci

**el_debutanti** · 10/02/2023, 15h42

Possible avec le pseudo-element :before. (merci NoSmoking

Mais je n'y comprends rien...très nouveau pour moi

https://www.developpez.net/forums/d2...ation-l-image/
Merci

**NoSmoking** · 10/02/2023, 18h43

Bonjour,
il te faut restait sur une construction simple avant d'attaquer le plus complet, comme ta structure de début par exemple.

Il faut bien voir ce que tu veux dans la profondeur pour pouvoir empiler tes éléments. Le CSS qui en découlera sera ainsi plus simple en respectant les règles d'usage de positionnement.

Explication par l'exemple :

Code html :

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Et pourtant elle tourne</title>
<style>
.rotate-cadre {
  position: relative;         /* pour servir de référent */
  
  display: flex;              /* juste pour centrage des éléments contenus */
  align-items: center;
  justify-content: center;
  
  width: 20em;                /* dimensionnement et autres */
  height: 15em;
  margin: auto;
  border: 1px solid #069;
  overflow: hidden;           /* masque les débordement */
}
.static-element {
  position: relative;         /* obligatoire pour qu'il soit au dessus */
  text-align: center;
}
.rotate-img {
  position: absolute;
  width: 100%;                /* toute la largeur du parent */
  opacity: .5;                /* pour mieux voir les éléments qui se trouvent dessus */
  
  animation: rotate 4s linear infinite;
  transform: rotate(0deg);
}
@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}
</style>
</head>
<body>
  <div class="rotate-cadre">
    <img class="rotate-img" src="https://cyberzoide.developpez.com/misc/background02-800x600.jpg" alt="rotate-image">
    <div class="static-element">
      <img src="https://nosmoking.developpez.com/demos/images/nosmoking_avatar.gif" alt="static-image">
      <p>Et pourtant elle tourne !</p>
    </div>
  </div>
</body>
</html>

Voilà pour un exemple simple.

**el_debutanti** · 11/02/2023, 12h24

C'est exactement ce que je voulais. Merci NoSmoking

Par contre, comme d'habitude, j'ai du mal à l'intégrer.
Je te donne mon

Code html :

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

1
2
3
4
5
6
7
8
9
  <div class="rotate-cadre">
    <img class="rotate-img" src="images/fontourne.jpg" alt="rotate-image">
    <div class="static-element">
      <figure><figcaption>
      <strong>Binet</strong>
    </figcaption>
	  </figure>
    </div>
  </div>

et mes CSS :

Code :

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

1
2
3
4
5
6
.static-element {
  position: relative;         /* obligatoire pour qu'il soit au dessus */
  text-align: center;
	background-image: url("../images/parker.png");
	background-size: cover;
}

L'image statique (dont le chemin est bon) et la figcation n'apparaissent pas. Effectivement, je souhaiterais que le tout soit responsive (d'où un bacckground-size: cover)
Merci et bon week-end

**NoSmoking** · 11/02/2023, 16h13

Par contre, comme d'habitude, j'ai du mal à l'intégrer.

il n'y avait presque rien à faire si ce n'est mettre l'élément <figure> à la place la <div>, donc :

Code html :

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

1
2
3
4
5
6
7
<div class="rotate-cadre">
  <img class="rotate-img" src="https://cyberzoide.developpez.com/misc/background02-800x600.jpg" alt="rotate-image">
  <figure class="static-element">
    <img src="https://nosmoking.developpez.com/demos/images/nosmoking_avatar.gif" alt="static-image">
    <figcaption>Et pourtant elle tourne !</figcaption>
  </figure>
</div>

L'image statique (dont le chemin est bon) et la figcation n'apparaissent pas. Effectivement, je souhaiterais que le tout soit responsive (d'où un bacckground-size: cover)

Je crois que tu mélanges tout, ceci étant ton élément n'ayant pas de contenu et de plus non dimensionné le background n'est pas affiché dans une espace qui n’existe pas !

**el_debutanti** · 11/02/2023, 16h35

entendu !
J'ai réussi à faire ce que je voulais, MERCI NoSmoking. Par contre, l'image est centrée en hauteur. Comment mettre une marge entre le haut de la photo et le bloc (pas grave si le bas de la photo est coupé, le principal étant le width) ?
J'ai tenté :

Code html :

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

<img src="images/parker.png" width= 100% margin-top= 30px alt="static-image">

mais cela n'a aucun effet

J'ai encore fait une bêtise

Encore merci pour tout

**NoSmoking** · 11/02/2023, 17h26

Ce n'est pas sur l'image qu'il faut que tu t'acharnes mais sur son conteneur, mais normalement cela devrait néanmoins fonctionner !

Code :

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

1
2
3
4
5
.static-element {
  position: relative;         /* obligatoire pour le mettre dessus */
  margin-top: 1em;            /* décalage vers le bas */
  text-align: center;
}