Как сделать из картинки ссылку?

Question

[pologenki]

Здравствуйте! Не получается сделать из картинки ссылку ! Картинка сделана как сликслайдер , при приминении тега (A) к картинке она прападает! Код прикладываю ниже :

<div class="slider">

            
            <div class="slider__item filter">
              <img src="img/Hero.png" alt="text">
                <div class="slider__item-title">My First Project</div>
                
                
            </div>
            <div class="slider__item">

               <img src="img/Hero.png" alt="">
            
                <div class="slider__item-title">My Firt Project</div>
                
            </div>
            <div class="slider__item ">
                <div class="img__img">
              <a href=""><img src="img/Hero.png" alt=""></a></div>
                
                <div class="slider__item-title">My Firt Project</div>
                
            </div>
            <div class="slider__item">
                <img src="img/Hero.png" alt="">
                <div class="slider__item-title">My Firt Project</div>
                
            </div>
        </div>

CSS

.slider {

  // .slider__item

  &__item {
    color: white;
    text-align: center;
    padding: 70px 10px;
  
    a{
      
        display: block;
        width: 100%;
        height: 100%;
      
    }

  }

  // .slider__item-title

  &__item-title {
  font-size: 25px;
  font-weight: 500;
  margin: 10px 0 7px;
  }

  // .slider__item-text

  &__item-text {
  
  }
}
.filter {
}

.a{
  display: block;
  width: 100%;
  height: 100%;
}

Comments

[Антон Горецкий]

выкладывайте в песочницу ваш пример воспроизводящий проблему. Я повторил вашу верстку у себя и у меня нигде картинка не пропадает. Стили компилируются в это:

.slider__item {
  color: #fff;
  text-align: center;
  padding: 70px 10px;
}

.slider__item a {
  width: 100%;
  height: 100%;
  display: block;
}

.slider__item-title {
  margin: 10px 0 7px;
  font-size: 25px;
  font-weight: 500;
}

.a {
  width: 100%;
  height: 100%;
  display: block;
}

[pologenki]

Антон Горецкий, незнаю как у вас все работает но вот как у меня :