0

Есть простая карточка-заголовок, простой текст и ссылка. Пытаюсь сделать появление градиента на всю карточку только по наведению на ссылку, при этом контент должен быть выше градиента, поэтому задаю тексту z-индекс, но так не получается "вытащить наверх" саму ссылку, и не получается все это сделать плавно, transition не работает. Как сделать так, чтобы весь контент карточки кроме фона (там фото будет) был выше градиента, а градиент появлялся плавно?

.specials__article {
position:relative;
width: 300px;
height: 300px;
background:#ccc;
}

.specials__article-text,
.specials__article-heading {
position:relative;
color:orange;
z-index:1000;
}

.specials__article-link {
color:white;
transition: background .5s ease-in-out;
}

.specials__article-link:hover::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, rgba(48, 64, 89, 0.84) -2.9%, rgba(53, 65, 83, 0) 65.7%);
}
 <article class="specials__article">
              <h3 class="specials__article-heading">
                Хороший товар
              </h3>
              <span class="specials__article-text">
                от 55 000 р
              </span>
              <a class="specials__article-link" href="#" target="_blank">Подробнее</a>
            </article>

1

1 ответ 1

1

Как сказал @MaximLensky

Градиент не анимируется

Но анимируется остальные свойства background (типо background-size и background-position).
Тем самым можно визуально сделать плавное появление снизу.

.hover {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 200px;
  background-color: #ccc;
  background-image: linear-gradient(to bottom, transparent, blue);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: 0 200px;
  transition: background-position .5s ease;
}

.hover:hover {
  background-position: 0 0;
}
<div class="hover">Наведи</div>

1
  • просто и со вкусом 3 июн 2021 в 16:53

Ваш ответ

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

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