Hiệu ứng ảnh tự zoom, animation, scale phần 1 full (ok)
<div class="slick-slide slick-current slick-active">
<div class="slick-slide-bg elementor-ken-in"></div>
<div class="slick-slide-inner">
<div class="woovina-background-overlay"></div>
<div class="woovina-slide-content">
<div class="woovina-slide-heading">We Are Climbers</div>
<div class="woovina-slide-description">I am slide content. Click edit button to change this text.
<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<br> Ut elit tellus, luctus nec ullamcorper mattis, pulvinar.</div><a href="https://demo-14.woovinapro.com/shop/" class="elementor-button woovina-slide-button elementor-size-sm" tabindex="0">Shop Now</a>
</div>
</div>
</div>
<style>
.slick-slide {
overflow: hidden;
height: 400px;
width: 450px;
}
@keyframes ken-burns-in {
0% {
-webkit-transform: scale(1);
transform: scale(1)
}
100% {
-webkit-transform: scale(1.3);
transform: scale(1.3)
}
}
.slick-slide-bg.elementor-ken-in {
height: 400px;
width: 100%;
background-color: #bbbbbb;
background-image: url(https://demo-14.woovinapro.com/wp-content/uploads/2019/08/slider-01-min.jpg);
background-size: cover;
animation-duration: calc(5000ms*1.2);
transition-duration: calc(5000ms);
-webkit-transform: scale(1.3);
-ms-transform: scale(1.3);
transform: scale(1.3);
-webkit-animation-name: ken-burns-in;
animation-name: ken-burns-in;
}
</style>
Previouscss rotate a pseudo :after or :before content:""NextCodePen Home Image zoom on hover - auto run - view (ok)
Last updated