两个图像悬停效果css答案

【问题标题】：Two image hover effect css两个图像悬停效果css
【发布时间】：2021-01-10 23:48:08
【问题描述】：

我有两张图像，一张在另一张上，当你将鼠标悬停在它上面时，会有一个整洁的过渡。

我有一个问题，我无法让我的图像贴在我创建的虚线框内 (see my fiddle) ...

如果你能看看我的小提琴，它会解释我糟糕的措辞......

正如您在我的示例中看到的那样，我希望我的显示器可以留在我的虚线框中。目前，当您向下/或向上滚动时，监视器会退出它（在它下面..）

是否可以在不固定背景位置的情况下使用纯 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>

【问题讨论】：

嗨！欢迎来到堆栈溢出！为了获得更快的响应，它可能有助于包含已实现效果的图像，以及使用 SO 可用的工具将您的代码示例正确地放在帖子中。祝你好运！
我在修改后的帖子中添加了您的代码

标签： html css image hover transition

【解决方案1】：

这是一个使用伪元素和剪辑路径的想法：

.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>

【讨论】：

非常感谢 Temani！这正是我想要的。