两个图像悬停效果CSS

如何解决两个图像悬停效果CSS

我有两张图像，一张又一张，当您将鼠标悬停在其上时，效果看起来很整洁。

但是我有一个问题，我无法将图像粘贴到我创建的虚线框内（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,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,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>

解决方法

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

.w {
  border: dotted;
  margin: 0 auto;
  width: 264px;
  height: 200px;
  position: relative;
  display: flex;
  background: 
    rgba(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,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

如何解决两个图像悬停效果CSS

解决方法

相关推荐