Aide image overflow

Thomas57
Les bases HTML/CSS

Bonjour,

J'apprend le HTML et CSS en autodidacte et pour m'entrainer je crée un site

J'avance plutôt bien mais il y a quelques fioritures que je ne maitrise pas encore

Ayant essayé toutes les façon qui me passe pas l'esprit, je me suis dit que certains d'entre vous serez plus à même à me répondre

Cordialement un apprenti développeur :D.

Ce que j'obtiens

J'ai un grid avec plusieurs images ainsi qu'un descriptif qui s'affiche quand on passe la souris dessus ":hover" j'ai aussi rajouter pour plus de réalisme une

transformation scale à l'image, or quand on passe la souris l'image déborde et c'est pas très pro donc j'ai bien évidemment essayé un overflow:hidden,

mais l'overflow ne fonctionne que sur le .card (dans le CSS) (j'ai beau essayer par exemple overflow:hidden directement sur l'image (.RecipeImage) et rien ne se passe) mais le

problème est que si je mets overflow:hidden sur le .card ça n'affiche plus le descriptif qui apparait avec le :hover

Voila le HTML

"<!-- Start PROJECTS SECTION -->
<section id="Recipes" class="RecipesS">
<h2 class="RecipesHeader">Voici quelques recettes polonaises.</h2>
<div class="Recipesgrid">
<!--Show-->
<div class="card">
<a href="SITEARAJOUTER789456123" target="_blank">
<img class="recipeimage" src="/image site/cuisine_polonaise_flickr_20189718600_906834451d_b.webp" alt="Photo de Soupe de betterave rouge">
<div class="intro">
<h1 class="recipetitle">Recette de Soupe de betterave</h1>
<p>
Soupe de Betterave rouge, pour une couleur magnifique et un gout unique.
</p>
</div>
</a>
</div>
<div class="card">
<a href="SITEARAJOUTER789456123" target="_blank">
<img class="recipeimage" src="/image site/recette-zurek-polonais.png" alt="Photo de zurek">
<div class="intro">
<h1 class="recipetitle">Recette de Zurek (Soupe aigre)</h1>
<p>
Prononcé <i>"jour"</i> vous pouvez manger cette soupe tous les jours.
</p>
</div>
</a>
</div>
<div class="card">
<a href="SITEARAJOUTER789456123" target="_blank">
<img class="recipeimage" src="/image site/Kopetka.png" alt="Photo de Kopetka">
<div class="intro">
<h1 class="recipetitle">Recette de Kopetka (gnocchi)</h1>
<p>
Appelé "gnocchi" dans certains pays, accompagné d'oignion et/ou de lardons, fera de ce plat un repas exeptionnel.
</p>
</div>
</a>
</div>
<div class="card">
<a href="SITEARAJOUTER789456123" target="_blank" >
<img class="recipeimage" src="/image site/41375_w1024h1024c1cx256cy192.png" alt="Photo de Pierogi">
<div class="intro">
<h1 class="recipetitle">Recette de Piegorie (Ravioli)</h1>
<p>
À la viande, au champignons, à la choucroute ou au fruit tant de déclinaison qui raviront vos papilles.
</p>
</div>
</a>
</div>
<!--Show more-->
<div class="card">
<a href="SITEARAJOUTER789456123" target="_blank">
<img class="recipeimage" src="/image site/kluski.png" alt="Photo de kluski slaskie ">
<div class="intro">
<h1 class="recipetitle">Recette de kluski slaskie</h1>
<p>
C'est pâte faite de purée de pomme de terre accompagneront très bien un plat en sauce.
</p>
</div>
</a>
</div>
<div class="card">
<a href="SITEARAJOUTER789456123" target="_blank">
<img class="recipeimage" src="/image site/eyJidWNrZXQiOiJhZGMtZGV2LWltYWdlcy1yZWNpcGVzIiwia2V5IjoicmVwX2ZvdG9saWFfMjA4NDdfYmlnb3NfY2hvdWNyb3V0ZV9wb2xvbmFpc2VfcG9sb2duZS5qcGciLCJlZGl0cyI6eyJqcGVnIjp7InF1YWxpdHkiOjgwfSwicG5nIjp7InF1YWxpdHk.webp" alt="Photo de Bigos (choucroute polonaise)">
<div class="intro">
<h1 class="recipetitle">Recette de Bigos (choucroute polonaise)</h1>
<p>
Marre du gout sempiternel de la choucroute, le bigos sera combler l'ennui.
</p>
</div>
</a>
</div>"

     Et voila le CSS

   "  .card {
height: 520px;
margin: 5px;
box-shadow: 5px 5px 20px rgb(0, 0, 0);
background: var(--main-gray);
border-radius: 20px 20px 0px 0px;

}

.intro{
height: 70px;
width: 100%;
padding: 1px;
box-sizing: border-box;
bottom: 240px;
color:white;
}

.card p{
font-size: 20px;
margin: 1px;
opacity: 0;
}

.card:hover .intro{
height: auto;
bottom: 240px;
background: var(--main-gray);
box-shadow: 5px 5px 20px rgb(0, 0, 0);
}

.card:hover .intro p{
opacity: 1;
visibility: visible;
}

.card:hover .recipeimage{
transform: scale(1.1);
transition:transform 1s;
}

.Recipesgrid .card .recipeimage{
height: calc(100% - 9rem);
width: calc(100%);
object-fit: cover;
border-radius: 20px 20px 0px 0px;
}

.recipetitle {
font-size: 2rem;
padding: 2rem 0.5rem;
}
"

Aucune réponse