Эффект наведения только с box-shadow, возможен ли в моем случае? - PullRequest
Новая
       16

Эффект наведения только с box-shadow, возможен ли в моем случае?

0 голосов
/ 24 апреля 2020

Как вы можете видеть ниже, у меня есть два предмета с похожим эффектом.

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

Чего я не могу добиться, так это чтобы тень начиналась на 20 пикселей сверху, но у нее нулевой перепуск снизу, как вы видите в первый предмет.

Возможно ли с помощью тени css добиться того же самого или мне нужно go с первым вариантом? 

.container {
  padding: 20px;
}
.item, .desired-item {
    max-width: 300px;
    height: 300px;
    position: relative;
}
.desired-item {
    padding-top: 25px;
}
figure {
    width: 100%;
    padding: 0;
    margin: 0;
}
figure img {
    width: 100%
}
.item .overlay {
    position: absolute;
    background-color: #ff6666;
    width: 100%;
    height: calc(100% - 20px);
    visibility: visible;
    opacity: 1;
    z-index: -1;
    right: -20px;
    transition: all .25s;
    margin-top: 20px;
}

.item figure:hover .overlay {
    visibility: visible;
    opacity: 0.3;
    z-index: 1;
    right: 0;
    height: calc(100% - 0px);
    margin-top: 0;
}

.desired-item figure:hover {
    -webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.75);
}
.desired-item figure {
    -webkit-box-shadow: 20px 20px 0px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 20px 20px 0px 0px rgba(0,0,0,0.75);
    box-shadow: 20px 20px 0px 0px rgba(0,0,0,0.75);
    transition: all .5s;
}
<div class="container">
<h2>overlay effect:</h2>

<div class="item">
<figure>
				<div class="overlay"></div>
				<img src="https://via.placeholder.com/600x600.jpg/09f/fff">
</figure>
</div>

<h2>Shadow effect:</h2>

<div class="desired-item">
<figure>
				<div class="overlay"></div>
				<img src="https://via.placeholder.com/600x600.jpg/09f/fff">
</figure>
</div>
</div>

1 Ответ

1 голос
/ 24 апреля 2020

Нанесите тень на изображение и положитесь на переполнение, чтобы скрыть ненужную часть: 

figure img {
  display:block;
  box-shadow: 20px 20px 0px 0px rgba(0, 0, 0, 0.75);
  transition: all .5s;
}

figure:hover img {
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.75);
}

figure {
 display:inline-block;
 padding-right:20px;
 overflow: hidden;
}
<figure>
  <img src="https://via.placeholder.com/150x150.jpg/09f/fff">
</figure>
...