Question

我仍在学习样式，并在以下位置寻找解决方案：

图像上出现了从浅灰色到浅绿松石的渐变叠加层
图片增加20％（不会爬出原始尺寸）并顺时针旋转30度
动画在300毫秒内顺利进行

所以我使图像缩放并旋转，但是覆盖层让我发疯。

.zoom-effect-container {
  float: left;
  position: relative;
  width: 300px;
  height: 200px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid black;
}

.image-card {
  position: absolute;
  top: 0;
  left: 0;
}

.image-card img {
  -webkit-transition: 300ms ease;
  transition: 300ms ease
}

.zoom-effect-container:hover .image-card img {
  -webkit-transform: scale(1.2);
  transform: scale(1.2) rotate(30deg);
}

<div class="zoom-effect-container">
  <div class="image-card">
    <img src="https://picsum.photos/300/200" />
  </div>
</div>

Answer 1

使用伪元素：

.image-card:before { ... }

对该元素应用CSS渐变。我使用了一个生成器站点来整理这个示例。确实很容易选择所需的任何设置：https://colorzilla.com/gradient-editor/#e0e0e0+0,00faff+100&0+0,0.65+100

此时将需要

z-index，以使“层”以正确的顺序堆叠。

.zoom-effect-container {
  position: relative;
  width: 300px;
  height: 200px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid black;
}

.image-card {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.zoom-effect-container:hover .image-card:before {
  /* this is the overlay */
  position: absolute;
  z-index: 9;
  content: '';
  width: 100%;
  height: 100%;
  background: -moz-linear-gradient(top, rgba(224, 224, 224, 0) 0%, rgba(0, 250, 255, 0.65) 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(224, 224, 224, 0) 0%, rgba(0, 250, 255, 0.65) 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(224, 224, 224, 0) 0%, rgba(0, 250, 255, 0.65) 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00e0e0e0', endColorstr='#a600faff', GradientType=0);
  /* IE6-9 */
}

.image-card img {
  position: relative;
  z-index: 1;
  -webkit-transition: 300ms ease;
  transition: 300ms ease;
}

.zoom-effect-container:hover .image-card img {
  -webkit-transform: scale(2);
  transform: scale(2) rotate(30deg);
}

<div class="zoom-effect-container">
  <div class="image-card">
    <img src="https://picsum.photos/300/200" />
  </div>
</div>

Answer 2

不清楚要对渐变叠加层做什么。现在，下面的示例：

为容器内的渐变添加一个div，并将其覆盖在图像顶部。因为我们两者都使用position: absolute，并且梯度div位于图像div之后，所以梯度div位于图像div的顶部。否则，我们必须使用z-index来控制哪个div位于最前面。
覆盖div将top, right, bottom, left全部设置为0，以覆盖整个容器。
叠加层div使用opacity通过透明效果让我们看透。 .2表示20％透明。 0完全透明； 1完全是实心/不透明。
在覆盖:hover上添加div，以在linear-gradient()上显示background。

.zoom-effect-container {
  float: left;
  position: relative;
  width: 300px;
  height: 200px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid black;
}

.image-card {
  position: absolute;
  top: 0;
  left: 0;
}

.image-card img {
  -webkit-transition: 300ms ease;
  transition: 300ms ease;
}

.gradient {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: .2;
}

.zoom-effect-container:hover .image-card img {
  -webkit-transform: scale(1.2);
  transform: scale(1.2) rotate(30deg);
}

.zoom-effect-container:hover .gradient {
  background: linear-gradient(lightgray, turquoise);
}

<div class="zoom-effect-container">
  <div class="image-card">
    <img src="https://picsum.photos/300/200" />
  </div>
  <div class="gradient"></div>
</div>

有用的链接以了解更多信息：

如何在旋转图像上叠加

2 个答案: