0

Ховер

Как сделать такой ховер? самая непонятная часть - это реализация поведения черного блока при снятии ховера

0

1 ответ 1

2

Думаю, что на чистом 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>

1
  • Спасибо большое!
    – ref21
    10 июн 2020 в 18:08

Ваш ответ

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

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