Question

使用SASS-时在投资组合网站上工作

我希望我的项目标题在悬停时显示在图像的底部。

我还没有尝试过悬停，但是如果可能的话，我将不胜感激！

HTML：

<div class="projects">
      <div class="item">
      <img src="img/projects/project1.jpg" alt="Project">
      <div class="overlay">TRACKFIT</div>
      <a href="#!" class="btn-dark">
        <i class="fab fa-behance"></i>
      </a>
      </div>

CSS：

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

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

    &.overlay {
      display: none;
    }

    &:hover {
      opactiy: 0.5;
      border-color: $secondary-color;
      @include easeOut;
    }
  }
}

The "TRACKFIT" text it still displaying beneath the image, regardless of the overlay display:none

非常感谢！

Answer 1

https://jsfiddle.net/kendra_chu/19qte5rh/4/

.projects{
  display: grid;
  grid-gap: 0.7rem;
  grid-template-columns: repeat(3, 1fr);
  .item{
     img{
          width: 100px;
          border: 3px #fff solid;   
          position: absolute
      }
       .title{
          display: none;
          position: relative /*text will appear on top of image*/
       }
      img:hover{
          opactiy: 0.5;
          border-color: #000;
      }
      img:hover + .title { /*display the tile when hover over the image*/
        display: block;
      }

  }
}

HTML

<div class="projects">
    <div class="item">
        <img src="https://picsum.photos/500/290/?random" alt="Project">
        <div class="title">TITLE</div>
        <a href="#!" class="btn-dark">
          <i class="fab fa-behance"></i>
        </a>
    </div>
</div>

Answer 2

您在SCSS中的&之前有一个错误的.overlay选择器。如果删除该代码，则您的代码将至少隐藏该叠加层。

还可以考虑关闭HTML中的<div id="projects">标签，它仍然处于打开状态。

您还可能希望将鼠标悬停在.item上，因为.overlay是它的子级，并且很容易选择。

请参阅codepen here。

Answer 3

您可以将.item放在相对位置，将.overlay放在绝对位置，然后通过移动100%将.item移出可见空间（这恰好是父级 .overlay 元素的高度）。然后，当您将鼠标悬停在图片上时，.project { .item { position: relative; overflow: hidden; img { width: 100%; &:hover { & ~ .overlay { margin-top: -100px; } } } .overlay { position: absolute; top: 100%; left: 0; width: 100%; height: 100px; transition: all 3s easy-in-out; // just to make it smoothly } } }的移动是通过从上到下修改其边距来实现的。

{{1}}

SCSS叠加显示仍然没有显示

3 个答案: