Пытаюсь сделать так, что бы при наведении курсора размывалась фоновая картинка, а текст сверху оставался нормальным. Я беру миниатюру поста из вордпресса и ставлю её фоном через 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>