Как сделать такой ховер? самая непонятная часть - это реализация поведения черного блока при снятии ховера
1 ответ
Думаю, что на чистом css такое вряд ли возможно. Вот вариант css-animation + jquery:
$('.block').hover(function(){
$('.fon').addClass('grow').removeClass('reduce');
}, function(){
$('.fon').addClass('reduce').removeClass('grow');
});
.block {
width: 200px;
height: 150px;
border: 1px solid red;
margin: 30px;
position: relative;
}
.fon {
width: 0;
height: 0;
background-color: rgba(0,0,0,.7);
position: absolute;
bottom: 0;
left: 0;
}
@keyframes grow {
0% { width: 0; height: 0; }
50% { width: 50%; height: 25%; }
100% { width: 100%; height: 100% }
}
@keyframes reduce {
0% { width: 100%; height: 100%; }
50% { width: 50%; height: 75%; }
100% { width: 0; height: 0 }
}
.fon.grow {
animation: grow 0.3s linear forwards;
}
.fon.reduce {
animation: reduce 0.3s linear forwards;
top: 0;
right: 0;
left: auto;
bottom: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="block">
<div class="fon"></div>
</div>