Отображение оверлея SCSS

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;
    }
  }
}

Текст "TRACKFIT", который он все еще отображаетпод изображением, независимо от наложенного изображения: нет

Большое спасибо заранее!

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

Вы можете поместить .item в относительное положение и .overlay в абсолютное положение, после этого вы уберете его из видимого пространства, переместив его 100% (что в точности соответствует высоте их родителя *).1004 *.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
        }

    }
}

Answer 3

У вас есть ошибочный & селектор до вашего .overlay в вашем SCSS.Если вы удалите это, ваш код по крайней мере скроет оверлей.

Также рассмотрите возможность закрытия тега <div id="projects"> в вашем HTML, он все еще открыт.

Вы также, вероятно, захотитецель зависает над .item, поскольку .overlay является ее дочерним элементом и может быть легко выбрана.

См. codepen здесь .