html - SCSS overlay display none 还在显示

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>