css - 在图像上使用 CSS 对 MouseOver 的悬停效果

Question

希望在作品集的元素部分有悬停效果。

布局由 CSS 网格组成，悬停时查看现场演示的链接应显示为响应式。动画转场

尝试了悬停效果，但布局困惑。

它必须只使用 css 悬停动画 并且没有 Javascript。

显示链接的悬停效果。

@DylanScript 给出了解决方案，但工作不正常。附图

第二张图片供引用

* {
  box-sizing: border-box;
}

body {
  height: 100%;
  margin: 0;
  line-height: 1.5;
}

a {
  color: #fff;
  text-decoration: none;
}

.projects {
  display: grid;
  grid-gap: 0.7rem;
  grid-template-columns: repeat(3, 1fr);
}

.projects img {
  width: 100%;
  border: 3px #fff solid;
}

.projects img:hover {
  opacity: 0.5;
}

.infobar {
  cursor: default;
  font-size: 0.9rem;
  font-weight: lighter;
  padding: 10px;
  text-align: left;
  width: 100%;
  height: 30%;
  position: absolute;
  bottom: -30%;
  transition: .3s ease-in-out;
  background: #413a44;
}

.infobar p {
  opacity: 0;
  margin: 0;
  transition: .6s ease-in-out;
}

.item:hover .infobar {
  bottom: 0%;
}

.viewBar:hover p {
  opacity: 1;
}

.viewBar img {
  position: absolute;
  left: 0;
  bottom: 0%;
  transition: .32s ease-in-out;
}

.viewBar:hover img {
  bottom: 30%;
}

.item:hover {
  transform: scale(1.01);
  filter: grayscale(0.6);
}

@media screen and (min-width: 1171px) {
  .projects {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media screen and (min-width: 769px) and (max-width: 1170px) {
  .projects {
    grid-template-columns: repeat(3, 1fr);
  }
}

<nav>

</nav>
<main>
  <div class="projects">
    <div class="item viewBar">
      <a href="#">
        <img src="https://source.unsplash.com/1600x899/?water">
      </a>
      <div class="infobar">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
          <a href="#" class="btn-light">
                            Demo...
                        </a>
        </p>
      </div>
    </div>
    <div class="item viewBar">
      <a href="#">
        <img src="https://source.unsplash.com/1600x899/?water">
      </a>
      <div class="infobar">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
          <a href="#" class="btn-light">
                            Demo...
                        </a>
        </p>
      </div>
    </div>

    <div class="item viewBar">
      <a href="#">
        <img src="https://source.unsplash.com/1600x899/?water">
      </a>
      <div class="infobar">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
          <a href="#" class="btn-light">
                            Demo...
                        </a>
        </p>
      </div>
    </div>


  </div>

</main>

<footer>

</footer>

Answer 1

问题是 img 和 .infobar 上的 position: absolute，通过应用 position: relative 动画可以正确执行:

.viewBar img {
  position: relative; ##########
  left: 0;
  bottom: 0%;
  transition: .32s ease-in-out;
}

.infobar {
  cursor: default;
  font-size: 0.9rem;
  font-weight: lighter;
  padding: 10px;
  text-align: left;
  width: 100%;
  height: 30%;
  position: relative; ###########
  bottom: -30%;
  transition: .3s ease-in-out;
  background: #413a44;
}

希望对你有帮助