در این ویدیو از آکادمی تیچرنت، یاد میگیرید که چگونه با استفاده از کدهای CSS و JavaScript یک افکت حرفهای زوم و بلور (محو شدن) را هنگام هاور روی تصاویر یا بخشهای دلخواه در المنتور ایجاد کنید. این تکنیک میتواند ظاهر سایت شما را جذابتر و حرفهایتر کند و تجربه کاربری بهتری را برای بازدیدکنندگان فراهم آورد.
کد استفاده شده در آموزش افکت زوم و محو شدن در هاور المنتور
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var $ = jQuery
$(document).ready(function(){
$('.card-focus').hover(function(){
$('.card-focus').addClass('blur')
$(this).removeClass('blur')
}, function(){
$('.card-focus').removeClass('blur')
})
})
</script>
<style>
.card-focus{
transition: all 0.3s ease-in-out;
}
.card-focus.blur{
filter: blur(13px) grayscale(0.6);
transform: scale(0.95);
}
.card-focus:hover{
transform: scale(1.05);
}
.card-focus .e-container,
.card-focus .e-con{
box-shadow: 0 10px 60px rgb(0 0 0 / 25%);
}
.card-focus .elementor-widget{
transition: all 0.3s ease-in-out;
}
.card-focus.blur .elementor-widget{
opacity: 0;
}
</style>