размытие изображения начальной загрузки карты при наведении

Question

Я пытаюсь смазать изображение карты начальной загрузки при наведении, но это не работает.Blur отлично работает без наведения.

Вот мой код (но я много чего пробовал):

.card-img {
    transition: all 1s ease;
    -webkit-filter: blur(0px); /* Chrome, Safari, Opera */
    filter: blur(0px);
}

.card-img:hover {
    transition: all 1s ease;
    -webkit-filter: blur(5px); /* Chrome, Safari, Opera */
    filter: blur(5px);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="card bg-dark text-white mt-4 mb-3 border-dark">
    <img class="card-img img-fluid" src="https://www.flightnetwork.com/blog/wp-content/uploads/2018/06/header-journey11.jpg" alt="Card image">
    <div class="card-img-overlay">
      <h1 class="card-title underline">Bienvenue sur le site de Motard d'Alsace !</h1>
      <p class="card-text p1 bg-dark">Trouve dès maintenant ta prochaine balade moto</p>
      <p class="card-text bg-dark">Ou partage tes propositions de balades !</p>
    </div>
</div>

Спасибо за помощь

Answer 1

Проблема в том, что card-img-overlay охватывает весь элемент card-img.Таким образом, он не может сказать, что вы наводите курсор на card-img div.

. Чтобы исправить это, проверьте наведение родительской карты и исключите card-img-overlay из селектора.

.card-img {
    transition: all 1s ease;
    -webkit-filter: blur(0px); /* Chrome, Safari, Opera */
    filter: blur(0px);
}

.card:hover > *:not(.card-img-overlay) {
    transition: all 1s ease;
    -webkit-filter: blur(5px); /* Chrome, Safari, Opera */
    filter: blur(5px);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="card bg-dark text-white mt-4 mb-3 border-dark">
    <img class="card-img img-fluid" src="https://www.flightnetwork.com/blog/wp-content/uploads/2018/06/header-journey11.jpg" alt="Card image">
    <div class="card-img-overlay">
      <h1 class="card-title underline">Bienvenue sur le site de Motard d'Alsace !</h1>
      <p class="card-text p1 bg-dark">Trouve dès maintenant ta prochaine balade moto</p>
      <p class="card-text bg-dark">Ou partage tes propositions de balades !</p>
    </div>
</div>