Использование Flexbox / Grid для размытия фона изображения с центром в контейнере в CSS

Question

Я в тупике. Я хочу создать что-то вроде этого:

Где фон это то же изображение, но размытое. Ограничения заключаются в том, что изображение должно быть в центре контейнера

У меня есть что-то вроде этого:

<div className="image-container">
  <img className="image-to-show" url>
  <div className="image-bg"/>
</div>

Моя проблема в том, что изображение для показа должно быть выровнено по центру. У меня

.image-container{
 display:flex,
 align:center
}

img.image-to-show{
 width:60%
}

Проблема в том, что я не могу выровнять изображение для показа по центру, поскольку контейнер изображений имеет 3 делителя, поэтому он также будет учитывать image-bg. Как добавить к этому размытие фона и центрировать изображение в контейнере? Я думал о добавлении фонового изображения в контейнер, но если я добавлю размытие поверх этого, весь контейнер будет размытым.

Answer 1

Это может быть легко достигнуто, пожалуйста, посмотрите на фрагмент кода. Чтобы получить четкий результат, нажмите на полную страницу после запуска фрагмента.

body, html {
  height: 100%;
  margin: 0;
}

.bg-image {
  background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTbDSiyg7FTcSl0C5Y1SNyXtIn6y5QZ_eUbvbmTwXeWJ2dXXl2ZiA&s");
  
  filter: blur(8px);
  -webkit-filter: blur(8px);
  
  /* Full height */
  height: 100%; 
  
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Position text in the middle of the page/image */
.bg-text {
  background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTbDSiyg7FTcSl0C5Y1SNyXtIn6y5QZ_eUbvbmTwXeWJ2dXXl2ZiA&s");
  background-repeat: no-repeat;
  background-size: 500px 300px;
  color: red;
  font-weight: bold;
  border: 3px solid #f1f1f1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 80%;
  padding: 20px;
  text-align: center;
}

<div class="bg-image"></div>

<div class="bg-text">
  <h2>Blurred Background</h2>
  <h1 style="font-size:50px">I am John Doe</h1>
</div>