بخش اول: معرفی آموزش

در این آموزش، یاد می‌گیرید چگونه با استفاده از Elementor Pro تصویر پس‌زمینه یک کانتینر را هنگام هاور روی عناصر داخلی تغییر دهید. این یک ترفند خلاقانه و جذاب است که به شما کمک می‌کند سایت وردپرسی خود را زیباتر و حرفه‌ای‌تر طراحی کنید.
برای مشاهده نتیجه خروجی میتوانید از طریق این لینک اقدام کنید.

بخش دوم: ویژگی‌های این آموزش

ایجاد افکت هاور حرفه‌ای: تغییر تصویر پس‌زمینه کانتینر هنگام هاور روی کارت‌ها، بدون نیاز به کدنویسی.

استفاده از ابزارهای المنتور پرو: بهره‌گیری از تنظیمات پیشرفته برای طراحی تعاملی و خلاقانه.

افزایش جذابیت بصری: طراحی کارت‌هایی با افکت حرکتی و نمایش اطلاعات بیشتر هنگام هاور.

مناسب برای تمامی سطوح: چه مبتدی باشید و چه حرفه‌ای، این آموزش برای شماست.

کاربرد گسترده: قابل استفاده برای صفحات معرفی خدمات، محصولات و بخش‌های تعاملی سایت.

بخش سوم: کدها و توضیحات کامل

برای مشاهده کدهای کامل این آموزش و نمونه‌های پیاده‌سازی‌شده، حتماً ویدیو آموزشی ما را ببینید و از کد های پایین صفحه استفاده کنید.

/* نمایش و مخفی سازی نوشته های کارت ها در زمان هاور */
selector{
    --text-position: -500px;
    --heading-position: -50px;
    --button-position: 70px;
}

selector, selector .single-card p, selector .single-card a, selector .single-card h2{
    transition: .5s all ease-in-out;
}
selector .single-card p, selector .single-card a{
    position: relative;
    bottom: var(--text-position);
}
selector .single-card a{
    transition: 0.5s all linear;
    position: relative;
    top: 500px;
}
selector .single-card:hover p, selector .single-card:hover a{
    bottom: 0px;
}
selector .single-card:hover a{
    top: var(--button-position);
}
selector .single-card h2{
    position: relative;
    bottom: var(--heading-position);
}
selector .single-card:hover h2{
    bottom: 0px;
}

.

/* تغییر بکگراند */
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
var $ = jQuery;

//Image One
var ImgOne = "url(https://kimiagh.ir/wp-content/uploads/2025/01/logodesign.png)";

//Image Two
var ImgTwo = "url(https://kimiagh.ir/wp-content/uploads/2025/01/steptodown.com367902.jpg)";

    $(document).ready(function(){
        
    $('#card-one').hover(function(){
        $('#main-parent').css("background-image", ImgOne)
    }, function(){
        $('#main-parent').css("background-image", "")
    });
    
    $('#card-two').hover(function(){
        $('#main-parent').css("background-image", ImgTwo)
    }, function(){
        $('#main-parent').css("background-image", "")
    })
    
    
    })
</script>

“اگر از این آموزش لذت بردید، حتماً نظر خود را در قسمت کامنت‌ها با ما به اشتراک بگذارید. همچنین می‌توانید سوالات خود را درباره این کدها مطرح کنید تا در سریع‌ترین زمان پاسخ دهیم!”