Размыть фон, а текст - нет

Question

Пытаюсь сделать так, что бы при наведении курсора размывалась фоновая картинка, а текст сверху оставался нормальным. Я беру миниатюру поста из вордпресса и ставлю её фоном через style, возможно в этом проблема, но как сделать иначе - не знаю. Пробовал использовать z-index, что бы текст поднять - не вышло. Пробовал разделить картинку и фон в разные div, что бы текст не наследовал размытие - так же не вышло. Первый раз пытаюсь сделать сайт, так что точно наделал ошибок. Заранее спасибо.

.news_wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
}

.news_box {
    margin: 10px;
    padding: 5px;
    flex: 1 30%;
    border-radius: 10px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    max-width: 350px;
    min-height: 242px;
}

.news_box:hover {
    filter: blur(1px);
    transition: 1s;
}

.news_box_text {
    color: white;
}

<?php $backgroundImg = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );?>

<div class="news_wrap">
<div class='news_box' style="background: url('<?php echo $backgroundImg[0]; ?>'); background-size: cover; background-position: center; background-repeat: no-repeat;">
        
   <div class='news_box_text'> <?php the_excerpt(); ?> </div>

</div>
</div>

Answer 1

Кроме filter, у нас теперь есть (89.79%) и backdrop-filter — используйте его, чтобы размыть всё, что находится под элементом с текстом:

.news_wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
}

.news_box {
  margin: 10px;
  flex: 1 30%;
  border-radius: 10px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  max-width: 350px;
  min-height: 242px;
  overflow: hidden;
}

.news_box_text {
  color: white;
  transition: 1s;
  width: 100%;
  height: 100%;
  padding: 10px;
}

.news_box_text:hover {
  backdrop-filter: blur(3px);
}

<div class="news_wrap">
  <div class='news_box' style="background: url('https://im0-tub-ru.yandex.net/i?id=0968ed6551f373e148aa97892b286ba5&n=13'); background-size: cover; background-position: center; background-repeat: no-repeat;">

    <div class='news_box_text'> Hello, World! </div>

  </div>
</div>

Другой вариант — просто разнести картинку и текст по разным элементам и добавить :hover их общему контейнеру:

.news_wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  max-width: 350px;
  min-height: 242px;
   
}

.news_wrap:hover .news_box {
  filter: blur(3px);
}

.news_box {
  flex: 1 30%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: all 1s;
}

.news_box_text {
  color: white;
  position: absolute;
  padding: 10px;
}

<div class="news_wrap">
  <div class='news_box' style="background: url('https://im0-tub-ru.yandex.net/i?id=0968ed6551f373e148aa97892b286ba5&n=13'); background-size: cover; background-position: center; background-repeat: no-repeat;">
  </div>
  <div class='news_box_text'> Hello, World! </div>
</div>

БЛОГ НА HUSL

Размыть фон, а текст - нет

Ответы (1 шт):