[Résolu] Gros problème Overlay sur une image avec Bootstrap par Batche - page 1

Résolu !

En fait le <div> n'inclut pas le padding qui semble présent sur le parent. Il suffit donc de "créer"ce padding à l'aide de calc().

Etant donné que j'avais un padding de 15px de chaque côté, j'obtiens dans mon css :

.overlay {

  position: absolute;
  bottom: 0%;
  left: 50%;
  background: blue;
  height: 15%;
  width: calc(100% - 30px);
  opacity: 0.5;
  border-radius: 0px 0px 10px 10px ;
}

Bonjour !

Je suis en train de m'entraîner à faire un site responsive avec bootstrap. Jusqu'ici tout va plutôt bien même si j'imagine que mon code n'est pas hyper propre. Le souci qui me prends la tête depuis quelques heures, c'est que je n'arrive pas à faire un overlay sur l'image.

Enfin plutôt je n'arrive pas à faire en sorte que cet overlay corresponde à la taille de l'image et non pas de la taille du <div> dans lequel cet overlay se trouve.

J'ai simplifié mon cas pour que ce soit plus simple à régler.

Donc j'ai un souci de cadre qui déborde : le background (en bleu en bas sur l'image ci-dessous) fait la taille du <div> et du <row> mais pas la taille de l'image. L'image, elle, a automatiquement 25px de padding en top, 15px en right et pareil en left.

Mon background par contre, n'a pas du tout ces padding et il est inutile de préciser que mettre un padding sur mon div n'y change rien. Je n'arrive tout simplement pas à faire en sorte que ce div ait la bonne taille. Ou plutôt une taille qui corresponde à celle de mon image dont les padding semblent inhérents au fonctionnement de bootstrap...

Ici ce que ça donne visuellement avec la console de Firefox qui montre bien les padding et la taille du div.

Sur ce lien le code HTML et CSS avec une image de remplacement :

http://jsfiddle.net/o9vjn3bm/

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" lang="fr"/>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">

        <title>Batche - Dessins</title>
		<link rel="stylesheet" href="style_batche_1_dessins.css" />
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    </head>

<body>
	<header> <!--Je place mon menu dans le header-->
		<div class="container-fluid">
			<div class="row">
			
				<nav class="col-12 menus .bg-dark"> <!-- Menus -->
					
					<div class="nav">
			 
					<div class="menu-haut col-4 nav-item dessins">
					
					<a class="nav-link active" href="site_batche_dessins.html">Dessins</a>
					</div>
  
					<div class="menu-haut col-4 nav-item videos">
					<a class="nav-link active" href="site_batche_videos.html">Vidéos</a>
					</div>
  
					<div class="menu-haut col-4 nav-item cv">
					<a class="nav-link" href="site_batche_cv.html">Cv</a>
					</div>

					</div>
				</nav>
			</div>
		</div>
	</header>

	<section>
		<div class="container-fluid">
			<div class="row">
				<nav class="col-12">
				
					<div class="nav">
			 
					<div class="menu-dessins col-6 nav-item nb">
					<a class="nav-link active" href="#noir_blanc">Noir & Blanc</a>
					</div>
  
					<div class="menu-dessins col-6 nav-item couleurs">
					<a class="nav-link" href="#couleurs">Couleur</a>
					</div>
					
					</div>
				</nav>
			</div>
		</div>		
	</section>

	<section id="Le_reve">
		<div class="container-fluid">
			<div class="row">

				<div class=" wrapper reve col-xl-4 col-lg-6 col-md-12 col-sm-12">
					<img src="images/reve.png" alt="reve" class="img-fluid fit-image">

					<div class="overlay ctr"></div>

				</div>    
				
				

				<div class="wrapper amour col-xl-4 col-lg-6 col-md-12 col-sm-12">
					<img src="images/amour.png" alt="amour" class="img-fluid fit-image">

				</div>

				<div class="wrapper charogne col-xl-4 col-lg-6 col-md-12 col-sm-12">
					<img src="images/charogne.png" alt="charogne" class="img-fluid fit-image">

				</div>
			</div>
		</div>


	</section>
</body>
</html>

En CSS :

@media (min-width: 576px) {
  .container-fluid {
    width: 540px;/*Pour les très petits écrans.*/
  }
}
@media (min-width: 768px) {
  .container-fluid {
    width: 720px; /*Pour les petits écrans*/
  }
}
@media (min-width: 1200px) {
  .container-fluid {
    width: 1200px;/*Pour les écrans moyens*/
  }
}
@media (min-width: 1920px) {
  .container-fluid {
    width: 1900px;/*Pour les grands écrans*/
  }
}
html,body {
  height: 100%;
  padding-left: 15px;
  padding-right: 15px;
}
/*MENUS DU HAUT*/
nav > div > div[class*="menu-haut"] {
  background-color: black;
  line-height: 40px;
  text-align: center;
}

nav > div > div > a {
  color: white;
  text-transform: uppercase;
}

nav > div > div > a:hover {
    color: white;
    text-transform: uppercase;
}

.dessins {
    border-right: 1px solid white;
    border-radius: 10px 10px 0px 0px;
}
.dessins:hover {
  background: rgba(0,0,0,1) url("images/separateur.png") no-repeat bottom;
}

.videos {
    border-radius: 10px 10px 10px 10px;
    border-right: 1px solid white;
    border-left: 1px solid white;
}

.videos:hover {
  background: rgba(0,0,0,1) url("images/separateur.png") no-repeat bottom;
}
.cv {
    border-radius: 10px 10px 10px 10px;
    border-left: 1px solid white;
}
.cv:hover {
  background: rgba(0,0,0,1) url("images/separateur.png") no-repeat bottom;
}

/*MENUS DU BAS*/
nav > div > div[class*="menu-dessins"] {
    border-top : 2px solid white;
    background-color: black;
    line-height: 40px;
    text-align: center;
}

.nb {
    border-radius: 0px 0px 0px 10px;
    border-right : 1px solid white;
}

.couleurs {
    border-radius: 0px 10px 10px 0px;
    border-left : 1px solid white;
}
.col-xl-4
 {
   padding-left: 15px;
 }

/*SECTION DESSINS*/

.fit-image{
  width: 100%;
  object-fit: contain;
  border-radius: 10px 10px 10px 10px;
}
.overlay {

  position: absolute;
  bottom: 0%;
  left: 50%;
  background: blue;
  height: 15%;
  width: 100%;
  opacity: 0.5;
}
.ctr {
  transform: translate(-50%, 0%);
  text-align: center;
}

.content:hover{
  opacity : 1;
}

.reve {
  padding-top: 25px;
  padding-right : 10px;
  max-width: 100%;

}
.amour {
  padding-top: 25px;
  padding-left:10px;
  padding-right: 10px;
  max-width: 100%;
}
.charogne {
  padding-top: 25px;
  padding-left : 10px;
  max-width: 100%;
}

Pourriez vous m'aider s'il vous plaît ?

-
Edité par Batche 21 mars 2020 à 21:59:59

Gros problème Overlay sur une image avec Bootstrap

Gros problème Overlay sur une image avec Bootstrap

Supprimer

Modérer

Signaler le message aux modérateurs