Footer qui se revele

**labarre2002** · 01/02/2023, 17h59

Bonsoir

Je tente de reproduire l'effet expliqué dans la vidéo ci- jointe:

j'obtiens l résultat suivant:

Nom : 1.jpg
Affichages : 86
Taille : 255,7 Ko

Nom : 2.jpg
Affichages : 78
Taille : 248,0 Ko

le soucis est que le footer n'est pas complétement occulté par le contenu principal
mon code html:

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
49
50
51
52
53
54
55
56
<!DOCTYPE html>
 
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="style.css">
<title>Resto</title>
<link rel="icon" href="favicon/logoB.ico">
</head>
 
<body>
   <main class="container">
 
<nav class="menu">
 
 <a href="#">Burger</a> 
 <a href="#">Sandwich</a> 
 <a href="#">Chawarma</a> 
<a href="#">Salades</a> 
 <a href="#">BBQ</a> 
 <a href="#">Boissons</a> 
 
 
 
 
</nav>
 
 
 
 
 
<div class="central" dir="ltr">
<div class="logo">
    <img src="images/logoB.png" alt="Logo">
</div>
 
    <p class="text">Decouvrer des Saveurs exquises</p>
 
<div class="pictures">
    <img src="images/burger.jpg" alt="Hamburger">
</div>
 
</div>
 
 
 
 
   </main>
 
   <footer>
   <p>&copy;*Copyright*****Chez MED***2023</p> 
   <p><img src="images/loc.png"  class="localisation" alt="Adresse">2152 ** Boulevard des ULYSSES</p>
   </footer>
</body>
</html>

mon css:

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
.container{
    position: relative;
    z-index: 1;
    box-shadow: 0 2rem 4rem #f3ebe0;
 
}
 
footer{
    position:sticky;
    bottom: 0;
    padding: 15vmin 2rem;
 
background-image:url("images/fries.jpg");
background-repeat: no-repeat;
background-size: cover;
}

Merci d'avance.

**NoSmoking** · 02/02/2023, 11h32

Bonjour,

le soucis est que le footer n'est pas complétement occulté par le contenu principal

il nous manque des infos concernant le contexte pour pouvoir t'aider.

**labarre2002** · 02/02/2023, 14h03

BOnjour NoSmoking

je realise une page comportant un footer.Auquel j ai ajoute un effet de style qui consiste a se reveler quand un utilisateur est sur la page.
Le contenu principal comporte un z-index et donc occulte le footer.

Le soucis est que mon footer est visible meme quand la partie comportant un z-index la recouvre.
J espere avoir ete assez explicite.

**NoSmoking** · 02/02/2023, 18h25

Le soucis est que mon footer est visible meme quand la partie comportant un z-index la recouvre.

ce qui voudrait dire que la partie recouvrante n'est pas assez large !

**labarre2002** · 02/02/2023, 18h47

elle est bien recouvrante le soucis est que l opacite semble reduite au point de laisser transparaitre l image en background dans le footer.
en d autres terme quand le footer est couvert il transparait on devine aisement .alors que dans la video ce n est pas le cas.

sur les captures d ecran ci dessus tu vois le background de la partie recouvrante a cette couleur

Nom : colour.png
Affichages : 48
Taille : 24,9 Ko

Nom : colour.png
Affichages : 48
Taille : 24,9 Ko

et l image du burger figure sur la partie recouvrante tu vois qu une image transparait dans le bas c est le footer

**NoSmoking** · 02/02/2023, 18h55

en d autres terme quand le footer est couvert il transparait on devine aisement .alors que dans la video ce n est pas le cas.

si l'on voit ton footer recouvert c'est que le recouvrant n'est pas opaque.

Dans l'exemple que tu donnes le background est opaque

Code :

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

1
2
3
4
5
main {
  background: white;
  box-shadow: 0 2rem 4rem #000;
  min-height: 100vh; /* Min-height to ensure everyone gets the scroll reveal */
}