0

введите сюда описание изображения

Как мне сделать чтобы ссылки были кликабельными, но при этом изображение было поверх ссылок

.flowers {
  position: relative;
  padding-top: 50px;
  &__block {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: auto auto auto auto auto auto;
  }
  &__item {
    width: 200px;
    height: 129px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #ffffff;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    transition: all 0.3s;
    &-title {
      font-family: "PT Sans";
      font-weight: 400;
      font-size: 18px;
      color: #03453b;
      margin-top: 10px;
    }
    &.flower-6 {
      grid-column: 6;
      grid-row: 1 / span 2;
      height: 100%;
    }
    &:hover {
      box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
    }
  }
  &__img {
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
  }
}
<section class="flowers">
  <div class="container">
    <div class="flowers__block">
      <a href="#" class="flowers__item">
        <img class="flowers__item-img" src="img/flower-1.svg" alt="">
        <span class="flowers__item-title">Букеты</span>
      </a>
      <a href="#" class="flowers__item">
        <img class="flowers__item-img" src="img/flower-2.svg" alt="">
        <span class="flowers__item-title">Монобукеты</span>
      </a>
      <a href="#" class="flowers__item">
        <img class="flowers__item-img" src="img/flower-3.svg" alt="">
        <span class="flowers__item-title">Розы</span>
      </a>
      <a href="#" class="flowers__item">
        <img class="flowers__item-img" src="img/flower-4.svg" alt="">
        <span class="flowers__item-title">Срезанные цветы</span>
      </a>
      <a href="#" class="flowers__item">
        <img class="flowers__item-img" src="img/flower-5.svg" alt="">
        <span class="flowers__item-title">Свадебные букеты</span>
      </a>
      <a href="#" class="flowers__item">
        <img class="flowers__item-img" src="img/flower-7.svg" alt="">
        <span class="flowers__item-title">Уличные растения</span>
      </a>
      <a href="#" class="flowers__item">
        <img class="flowers__item-img" src="img/flower-8.svg" alt="">
        <span class="flowers__item-title">Подарки</span>
      </a>
      <a href="#" class="flowers__item">
        <img class="flowers__item-img" src="img/flower-9.svg" alt="">
        <span class="flowers__item-title">Конфеты</span>
      </a>
      <a href="#" class="flowers__item">
        <img class="flowers__item-img" src="img/flower-10.svg" alt="">
        <span class="flowers__item-title">Воздушные шары</span>
      </a>
      <a href="#" class="flowers__item">
        <img class="flowers__item-img" src="img/flower-11.svg" alt="">
        <span class="flowers__item-title">Композиции</span>
      </a>
      <a href="#" class="flowers__item flower-6">
        <img class="flowers__item-img" src="img/flower-6.svg" alt="">
        <span class="flowers__item-title">Комнатные растения</span>
      </a>
    </div>
  </div>
  <img src="img/flowers-bg.png" alt="" class="flowers__img">
</section>

2
  • 1
    Непонятна суть вопроса... 12 окт 2022 в 20:01
  • Есть картинка. Она находится поверх ссылки. Ссылка становится не кликабельна из-за картинки, как сделать чтобы ссылка была кликабельна, но чтобы при этом картинка была поверх ссылки? 19 окт 2022 в 9:35

1 ответ 1

2

Возможно всё-таки прямоугольники ссылок должны быть прозрачными, а не фон должен лежать поверх ссылок. Подумайте над этим.

В вашем варианте с фоном сверху сделать ссылки кликабельными очень просто — используйте css свойство pointer-events.

.bg1, .bg2 {
  width: 100px;
  height: 50px;
  position: absolute;
  top: 0px;
}

.bg1 {
  background-color: rgba(255, 0, 0, 0.5);
  left: 0px;
}

.bg2 {
  background-color: rgba(0, 0, 255, 0.5);
  left: 100px;
  pointer-events: none;
}
<a href="#">click me click me click me click me</a>
<div class="bg1"></div>
<div class="bg2"></div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.