Images flou quand je réduit l'écran

Bonjour,

Comment faire pour que mon image ne sois pas floue quand je réduis la fenêtre ?
j'ai mis un média querie je ne pense pas avoir fait ça correctement.

Merci.

<div class="background-color">
    <h2 id="projets">Mes Projets</h2>
    <div class="parent">
        <div class="div1">
            <img class="img" src="/assets/img/projectImage/catmash.jpg" alt="projet1">
            <div class="middle">
                <div class="text">
                    <h3>Langage utilisé :</h3>
                    <hr>
                    <p>Angular 8</p>
                    <h3>Lien Projet:</h3>
                    <hr>
                    <a href="https://catmashrv.netlify.com" target="_blank">Accedez au site</a>
                </div>
            </div>
        </div>
        <div class="div2">
            <img class="img" src="/assets/img/projectImage/snakgame.jpg" alt="projet2">
            <div class="middle">
                <div class="text">
                    <h3>Langage utilisé :</h3>
                    <hr>
                    <p>Javascript</p>
                    <h3>Lien Projet:</h3>
                    <hr>
                    <a href="https://richi92d.github.io/SnakeGame/" target="_blank">Accedez au site</a>
                </div>
            </div>
        </div>
    </div>
</div>

.background-color {
  background-color: #f05f40;
}

.parent {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: (1fr);
  grid-column-gap: 24px;
  margin: 0 20%;
  padding-bottom: 3%;
}

.div1 {
  grid-area: 1 / 1 / 2 / 2;
  position: relative;
}

.div2 {
  grid-area: 1 / 2 / 2 / 3;
  position: relative;
}

h2 {
  text-align: center;
  padding-top: 2%;
  margin-top: 0;
}

img {
  max-width: 100%;
  height: 15rem;
  border-radius: 5px;
  border: 3px solid white;
}

@media screen and (min-width: 600px) {
  img {
    max-width: 100%;
    max-height: auto;
  }
 }

.div1:hover .middle {
  opacity: 1;
}

.div1:hover .img {
 filter: blur(1.7px);
}

.div2:hover .middle {
  opacity: 1;
}

.div2:hover .img {
 filter: blur(2px);
}

.middle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
}

.text {
  color: white;
  font-size: 16px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

a {
  padding: 5%;
  background-color: #f05f40;
  text-decoration: none;
  color: #eee;
}

Modifié par Richard92 (03 Apr 2020 - 12:36)

Salut,

Qu'est-ce que tu entends par "floues" ? Comme avec le blur ? Ou juste écrasée en largeur ?