Css эффект "стеклянной тени"

Я пытаюсь добиться этого эффекта тени, где тень похожа на размытую версию самого изображения:

enter image description here

Мне удалось добиться этого, сложив одно и то же изображение дважды и применив filter: blur(20px) к тому, что ниже, но это кажется неэффективным способом сделать это:

.cover-wrapper {
  position: relative;
  margin: 50px;
  width: 200px;
  height: 200px;
}

.cover {
  z-index: 1;
  border-radius: 10px;
  position: absolute;
  width: 200px;
  height: 200px;
}

.cover-shadow-wrapper {
  position: absolute;
  filter: blur(20px);
  overflow: hidden;
  height: 200px;
  width: 200px;
}

.cover-shadow {
  transform: scale(1.5)
}
<div class="cover-wrapper">
  <img src="https://picsum.photos/200/200?image=871" alt="cover" class="cover">  
  <div class="cover-shadow-wrapper">
    <img src="https://picsum.photos/200/200?image=871" alt="shadow" class="cover-shadow">
  </div>    
</div>

Есть ли более эффективный способ сделать это? Кроме того, как на самом деле называется этот эффект?

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

sol 26.10.2018 08:16
5
1
642
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

это должен быть тег изображения?

вы можете использовать один div и его :: after pesudo, дать им одно и то же фоновое изображение и атрибуты, а затем размыть :: after, у вас будет один элемент в html, который проще

.glassy-img, .glassy-img::after {
  background-image: url(https://picsum.photos/200/200?image=871);
  border-radius: 10px;
  background-size: cover;
  background-position: center;
  width: 200px;
  height: 200px;
}
.glassy-img::after {
  content: '';
  filter: blur(20px);
  display: block;
  position: relative;
  z-index: -1;
}
<div class="glassy-img"></div>

Это действительно единственный способ сделать это. Вам просто нужно иметь в виду, что вы добавляете URL-адрес изображения в свойство css background-image. Так что примите это во внимание, если вы будете обновлять изображение в будущем.

Daniel Gonzalez 26.10.2018 08:05

Идеально! Спасибо :) Также мне было просто любопытно, есть ли у этого эффекта общее название?

glocore 26.10.2018 08:18

Другие вопросы по теме