时间戳

首页 > 解决方案 > 如何在图像下创建阴影？

html - 如何在图像下创建阴影？

问题描述

我想为悬停在图像下的阴影创建“飞行”效果。重要的！图像可以有不同的宽度（以及阴影） 在此处输入图像描述

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>

标签： htmlcssbox-shadow

解决方案

我刚刚写这篇文章是为了向您展示概念证明，请获取您需要的部分并在您的代码中使用它们。

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/

推荐阅读