Как "приручить" вёрстку слоями и подружить её с webkit-ом

Question

У меня есть три элемента в ряду. Я хочу сделать так, чтобы сохранить эффект размытия с ховером для левого элемента и наложение текста с скруглением остальных элементов, да так, чтобы текст смотрелся адекватно и никуда не убегал.

код прилагаю

.socb1 {
  height: 200px;
  width: 200px;
  border-radius: 10px;
  z-index: 10;
}

.socb1 div {
  background-image: url("image.jpg");
  height: 200px;
  width: 200px;
  background-size: 100%;
}

.socb1 h3 {
  color: white;
  z-index: 10;
  position: static;
  left: 30%;
}

.bg {
  -webkit-filter: blur(3px);
  filter: blur(3px);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}

.bg:hover {
  -webkit-filter: blur(0);
  filter: blur(0);
}

.socb2 {
  background-image: url("image.jpg");
  height: 200px;
  width: 200px;
  background-size: 100%;
  border-radius: 10px;
}

.socb2 h3 {
  color: black;
}

.socb3 {
  background-image: url("image.jpg");
  height: 200px;
  width: 200px;
  background-size: 100%;
  border-radius: 10px;
}

.socb3 h3 {
  color: black;
}

<div class="socb1">
  <h3>Dolorem Ipsum</h3>
  <div class="bg"></div>
</div>
<div class="socb2">
  <h3>Dolorem ipsum</h3>
  <div class="bg"></div>
</div>
<div class="socb3">
  <h3>Text-fish</h3>
  <div class="bg"></div>
</div>

БЛОГ НА HUSL

Как "приручить" вёрстку слоями и подружить её с webkit-ом

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