1

Есть код кнопки с анимацией фона по hover. Не могу понять, как сделать, чтобы пузыри на фоне не перекрывали текст, z-index не помогает.

Ссылка на CodePen

.wrap {
  background: #893565;
  color: #fff;
  padding: 25px 50px;
  margin-top: 15%;
  margin-left: 10%;
  display: block;
  max-width: 25vw;
  text-align: center;
  text-decoration: none;
  font-family: Arial;
  font-size: 22px;
  position: relative;
  transition: 2s linear;
  overflow: hidden;
  border-radius: 10px;
}

.bubbles {
  overflow: hidden;
}

.ps {
  background: rgba(200, 100, 200, 1);
  position: absolute;
  top: 150%;
  left: 65%;
  width: 60%;
  height: 280%;
  transition: 1s ease;
  border-radius: 100%;
}

.ps2 {
  background: rgba(200, 100, 200, 1);
  position: absolute;
  top: 150%;
  left: 25%;
  width: 60%;
  height: 280%;
  transition: 1s linear;
  border-radius: 100%;
  z-index: 0;
}

.ps3 {
  background: rgba(200, 100, 200, 1);
  position: absolute;
  top: 150%;
  left: -15%;
  width: 60%;
  height: 280%;
  transition: 1s ease;
  border-radius: 100%;
}

.wrap:hover .ps {
  transform: translateY(-75%);
}

.wrap:hover .ps2 {
  transform: translateY(-75%);
}

.wrap:hover .ps3 {
  transform: translateY(-75%);
}

#a1 {
  display: inline-block;
  color: #fff;
  text-decoration: none;
  overflow: hidden;
}

#text {
  z-index: 1000
}
<div class="wrap">
  <a href="#" id="a1">
    <div class="bubbles">
      <div class="ps"></div>
      <div class="ps2"></div>
      <div class="ps3"></div>
    </div>
    <span id="text">Link text</span>
  </a>
</div>

2
  • z-index применяется только к элементам у которых есть какой-нибудь position. z-index 1000 у тега с индексом text ничего не делает
    – user355286
    15 июл 2020 в 18:30
  • можно ему position:relative написать, чтобы ничего не поломалось
    – user355286
    15 июл 2020 в 18:31

2 ответа 2

0

Добавьте позицию отличную от static, z-index работает только для позиционированных элементов:

#text {
  position: relative;
  z-index: 1000
}

Позиция relative это наиболее безопасное решение если Вы не хотите что бы элемент выбился из своего естественного flow.

1
  • Благодарю! Не знал про эту особенность z-index
    – Aner
    15 июл 2020 в 19:09
0

Создайте контейнер relative и внутри него сразу помещайте текст и элементы absolute. Для контейнера задайте z-index: 0, а для элементов absolute задайте z-index: -1

Пример:

HTML

<div class="wrap">
  Текст
  <div class="absolute"></div>
</div>

CSS

.wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 50%;
    height: 150px;
    background: red;
    font-size: 50px;
    color: #fff;
    margin: 0 auto;
    z-index: 0;
}

.absolute {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: -1;
    transform: translateY(50%) translateX(-10%);
}

Ссылка: CodePen

Ваш ответ

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

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