Как создать тень под изображением?

Я хочу создать «летающий» эффект для изображений при наведении с тенью под изображениями. Важный! Изображения могут быть разной ширины (как и тени) введите здесь описание изображения

body{
  padding: 50px;
}
.images{
  list-style-type: none;
  display: flex;
  justify-content: center;
}
.images__item{
  margin-left: 10px;
  margin-right: 10px;
  background: #eee;
  padding: 30px;
  transition: .3s;
}
.images__item img{
  transition: .5s;
}
.images__item:hover {
  background: #FCF1F7;
}
.images__item:hover img{
  transform: translateY(-60px);
}
<ul class="images">
  <li class="images__item">
    <img src="https://via.placeholder.com/130x200" alt="">
  </li>
  <li class="images__item">
    <img src="https://via.placeholder.com/220x250" alt="">
  </li>
</ul>


html css box-shadow
person someserj    schedule 03.10.2018    source источник
comment
Используйте псевдоэлемент и увеличьте размытие.   -  person Andy Holmes    schedule 03.10.2018
comment
@AndyHolmes, не могли бы вы привести пример такого размытия?   -  person someserj    schedule 03.10.2018
comment
Да, дай мне секунду, я посмотрю, смогу ли я быстро что-нибудь состряпать.   -  person Andy Holmes    schedule 03.10.2018
comment
Я вижу, что люди отвечают на ваш вопрос в поисках вознаграждения, но они не беспокоятся, проголосовав за вас. Это хороший вопрос, поэтому я проголосовал за него, возможно, другим следует сделать то же самое. :)   -  person Invariant Change    schedule 03.10.2018

Ответы (2)


arrow_upward
1
arrow_downward

Я только что написал это, чтобы показать вам доказательство концепции, пожалуйста, возьмите нужные вам части и используйте их в своем коде.

body {
  padding: 50px;  
}

.item .image {
  width: 100px;
  height: 300px;
  background-color: red;
  position: relative;
}

.item .image:after {
  width: calc(100% + 150px);
  height: 100px;
  content: '';
  position: absolute;
  bottom: -125px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  background-color: rgba(0,0,0,0.2);
  filter: blur(20px);
}
<div class="item">
  <div class="image"></div>
</div>

Вот и JSfiddle — https://jsfiddle.net/a5Lxp1vy/

person Andy Holmes    schedule 03.10.2018
comment
Большое спасибо за помощь! Один комментарий - IE11 не поддерживает фильтр: размытие :( - person someserj; 03.10.2018
comment
@someserj ах извините! Я больше не поддерживаю IE11, поэтому не думал об этом. Это может помочь - stackoverflow.com/questions/25850100/css-blur-in-ie-11< /а> - person Andy Holmes; 03.10.2018

arrow_upward
-1
arrow_downward

Вот хороший пример, который я использую здесь div, вы можете поместить сюда изображение:

.box {
     position: relative;
     width: 400px;
     height: 250px;
     background-color: #fff;
  
     border-radius: 1%     1%     1%     1% /     1%     1%     1%     1%;
}
.box:after {
      position: absolute;
      width: 64%;
      height: 12%;
      left: 0%;
      border-radius: 50%;
      z-index: -1;
      bottom: 0%;
      content: "";
      box-shadow: 0 50px 24px rgba(0,0,0,0.24);
}
.box>img{
  margin-left:50px;
}
<div class="box">
    <img src="https://image.ibb.co/eew9Te/html_How_to_create_shadow_under_image_Stack_Overflow.png" />
    </div>

Пример с обрезанным изображением:

введите здесь описание изображения

person Nezir    schedule 03.10.2018