Как сделать градиент сверху вниз при наведении?

Question

Как сделать градиент сверху вниз при наведении?

Рейтинг: 0Ответов: 2Опубликовано: 14.03.2023

Имеются изображения, при наведении на каждое из изображений, должно происходить появление тени снизу вверх

.post-card__thumbnail {
  max-width: 100%;
  margin-bottom: 1em;
  position: relative;
  flex-basis: 0;
  max-width: 100%;
  margin-bottom: 1em;
}

.post-card__thumbnail a::before {
  content: "";
  position: absolute;
  top: 100%;
  right: 0;
  bottom: 0;
  left: 0;
  background: #060609;
  opacity: 0;
  transition: all .3s;
}

.post-card__thumbnail a::before {
  background-color: #ff1414;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

<div class="post-card__thumbnail">
  <a href="#">
    <img class="web" src="hh.png" alt="Windows">
  </a>
</div>

css html

Источник: Stack Overflow на русском

Answer 1

▲ 1Принят

В before создаём тот самый градиент. Задаём ему по умолчанию top: 100%;, а при наведении top:0;. Его родителю даём overflow: hidden;, для скрытия градиента, когда он находится вне родителя.

body {
    background:aqua;
}
.post-card__thumbnail{
    max-width: 100%;
    margin-bottom: 1em;
    position: relative;
    flex-basis: 0;
    max-width: 100%;
    margin-bottom: 1em;
    width: 200px;
    height: 200px;
    overflow: hidden;
}
.web {
  display: block;
  width: 100%;
  height: 100%;
  background-color: white;
}
.post-card__thumbnail .web:before {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, transparent 20%, rgba(255,34,21,0.5) 100%);
  transition: 0.3s;
}
.post-card__thumbnail:hover .web:before {
  top: 0;
}

<div class="post-card__thumbnail">
        <a href = "https://qna.habr.com/q/619378">
            <div class = "web"></div>
        </a>
    </div>

Answer 2

▲ 0

Более сложный вариант, где логотип используется в качестве маски и "тень" выглядит более аккуратно.

.post-card__thumbnail {
  display: block;
  width: 120px;
  mask: var(--mask, none) no-repeat center center / contain;
  position: relative;
  overflow: hidden;
}

.post-card__thumbnail::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(255,255,255,.35), rgba(0,0,0,0));
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  transform: translateY(100%);
  transition: transform .3s ease;
}

.post-card__thumbnail:hover::after {
  transform: translateY(0);
}

.post-card__thumbnail img {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  object-fit: contain;
}

<div class="post-card__thumbnail" style="--mask: url(//i.imgur.com/LOF9Q1X.png)">
  <a href="#">
    <img src="//i.imgur.com/LOF9Q1X.png">
  </a>
</div>
<div class="post-card__thumbnail" style="--mask: url(//i.imgur.com/XU2EzRm.png)">
  <a href="#">
    <img src="//i.imgur.com/XU2EzRm.png">
  </a>
</div>

Как сделать градиент сверху вниз при наведении?

Ответы