两张图片悬停效果css

Question

我有两张图片，一张放在另一张上面，当您将鼠标悬停在上面时，过渡看起来很整洁。

Mouse hover image effect

不过我有一个问题，我无法将图像粘贴到我创建的虚线框内 (see my fiddle) ...

如果你能看看我的 fiddle 就可以解释我糟糕的措辞...

如您在我的示例中所见，我希望我的显示器可以留在我的虚线框内。目前，当你向上滚动 down/or 时，监视器会消失（在它下面..）

甚至可以在不固定背景位置的情况下使用纯 css 吗？如果不是，那是什么？

如有任何帮助，我们将不胜感激。

body {
  height: 1000px;
}

.w {
  border: dotted;
  margin: 0 auto;
  white-space: nowrap;
  max-width: 261px;
  width: 100%;
  height: 212px;
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  background: rgba(66, 66, 66, 0.5) url("https://helpzona.com/testing/servicesHD.jpg?fit=crop&fm=jpg&h=1080&q=75&w=1920") repeat fixed;
  background-position: 50% 100%;
  background-repeat: none;
  background-size: cover;
  z-index: 5;
  font-size: 0;
}

.i {
  width: 40px;
  height: 100%;
  display: inline-block;
  position: relative;
  z-index: 4;
  padding: 2px;
  transition: all 5.3s ease-in-out;
  background: rgba(66, 66, 66, 0.5) url("https://helpzona.com/testing/servicesHD1.jpg?fit=crop&fm=jpg&h=1080&q=75&w=1920") repeat fixed;
  background-size: cover;
  background-repeat: none;
  background-position: 50% 100%;
  border-radius: 0%;
}

.i:hover {
  -webkit-transition: all 0s linear;
  transition: all 0s linear;
  opacity: 0;
}

<body>
  <div class="w">
    <div class="i"></div>
    <div class="i"></div>
    <div class="i"></div>
    <div class="i"></div>
    <div class="i"></div>
    <div class="i"></div>
    <div class="i"></div>
    <div class="i"></div>
  </div>
</body>

Answer 1

这是一个使用伪元素的想法 clip-path:

.w {
  border: dotted;
  margin: 0 auto;
  width: 264px;
  height: 200px;
  position: relative;
  display: flex;
  background: 
    rgba(66, 66, 66, 0.5) url("https://helpzona.com/testing/servicesHD.jpg?fit=crop&fm=jpg&h=1080&q=75&w=1920") 
    top/auto 150% no-repeat; /* this should be the same as */
}

.i {
  width: 100%;
  clip-path: inset(0);
}

.i::before {
  content: "";
  position: absolute;
  opacity: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    rgba(66, 66, 66, 0.5) url("https://helpzona.com/testing/servicesHD1.jpg?fit=crop&fm=jpg&h=1080&q=75&w=1920") 
    top/auto 150% no-repeat; /* this! */
  transition: all 5.3s ease-in-out;
}

.i:hover::before {
  opacity: 0;
  transition: all 0s ease-in-out;
}

<div class="w">
  <div class="i"></div>
  <div class="i"></div>
  <div class="i"></div>
  <div class="i"></div>
  <div class="i"></div>
  <div class="i"></div>
  <div class="i"></div>
  <div class="i"></div>
</div>

两张图片悬停效果css

Two image hover effect css

html

css

image

hover

transition