CSS display bug

[jeremygoldyn]

Hello everyone,

I am working on a personal travel website displaying all cool places to visit.
Language : HTML, PHP

I have a display bug which is coming from CSS I think but I don't know how to fix it.

1. There is a gap between the image and the background.
2. The background which should display a transparent filter does not apply. How to make it pass above the image?

Any idea to solve this? | * ()
Thank you !

Current visual result: see here

html code:

**** ENDROITS À DÉCOUVRIR <br><br />

<?php
try
{
    // On se connecte à MySQL
    $bdd = new PDO('mysql:host=localhost;dbname=visitearth;charset=utf8', 'root', 'root');
}
catch(Exception $e)
{
    // En cas d'erreur, on affiche un message et on arrête tout
        die('Erreur : '.$e->getMessage());
}

$reponse = $bdd->query('SELECT l.comte_nom, l.lieu_nom, l.pays_nom, p.flag_nom, l.lieu_url
FROM lieux l LEFT JOIN pays p ON l.pays_nom = p.pays_nom LIMIT 16');

?>

<?php while ($donnees = $reponse->fetch()) { ?>

<div class="vignette">
    <div class="lieu"><?php echo $donnees['lieu_nom']; ?></p></div>
    <div class="pays"><?php echo $donnees['pays_nom']; ?>, <?php echo $donnees['comte_nom']; ?></div>   
    <img src="<?php echo $donnees['flag_nom']; ?>" alt="drapeau" class="flag">
    <img src="<?php echo $donnees['lieu_url']; ?>" alt="Lieu"/>
</div>
<?php } ?>

</body>
</html>

CSS code:

/* Vignette */

.vignette
{
    background-image: linear-gradient(180deg, rgba(255,255,255,0) 0%, #000000 100%);
    font-family: montserrat;
    display: inline-block;
    width: 270px;
    height: 302px;
    border-radius: 2px;
}

.flag
{
    max-width: 20px;
    max-height: 15px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top: 100px;

}

.lieu
{
    font-size: 20px;
    color: white;
    text-transform: uppercase;
    text-align: center;
    position: relative;
    top: 200px;
}

.pays
{
    font-size: 15px;
    color: white;
    position: relative;
    top: 200px;
    text-align: center;
}

.vignette img
{
    object-fit: cover;
    width: 270px;
    height: 302px;
    object-position: 100% 0;
}