اموزش ویدئویی zoom efact افکتی زیبا با زوم کردن تصویر css

 

برای تماشای دمو کلیک کنید

آموزش :

در این اموزش قصد داریم که با معلق شدن (hover) تصویری که داریم زوم شود.

———————————-

ما ابتدا یک دیو تعریف میکنیم با کلاس X. (X = هر کلمه دلخواه)

سپس در قسمت استایل فراخوانی می کنیم.

در مرحله بعد طول و ارتفاع رو تعیین میکنیم.

و بعد مکان و مقدار گرد بودن و… تعریف میکنیم.

اما تمام کار مارو

background-size: 100% 100%;
-webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;
}

این دو خط انجام میدن.

  -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;

خوب این برای اینه که کدمون تو تمام مروگر ها کار کنه و خاصیت این کد اینه که کار مارو به نرمه نشون میده.

background-size: 100% 100%;

و این هم سایز عکسمونه که میگیم عکس 100% طول کارمونو پر کنه و 100% ارتفاعمونو.

خوب تا اینجا کار ما تموم شدست فقط باید بگیم موقع معلق شدن چه اتفاقی پیش بیاد.

.gallery-images:hover{
background-size: 150% 150%;
background-position: center;
}

و حال این دوخط را میگذاریم و تمام.

background-position: center;

برای نشون دادن وسط عکس

background-size: 150% 150%;

و این برای بزرگ نشون دادن کار.

—————————————————————————————————————————————–

امید وارم که راضی بوده باشید و بهتون کمک کرده باشم.

—————————————————————————————————————————————–

کد کل کار

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>zoom iman</title>
</head>
<body>
    <div class="gallery-images"></div>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    html{
        direction: rtl;
    }
    body{
        background-color: #c9302c;
    }
    .gallery-images{
        width: 200px;
        height: 200px;
        border-radius: 50%;
        border: solid 20px #520000;
        margin: 300px auto;
        background-image: url("images/98ip.ir.png");
        background-size: 100% 100%;
        -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;
       }
    .gallery-images:hover{
        background-size: 150% 150%;
        background-position: center;
    }
</style>
</body>
</html>

 

ویدیو این آموزش :

 

 

بخش دانلود

دانلود ویدئوی اموزشی با کیفیت 270

دانلود ویدئو اموزشی با کیفیت 360

دانلود ویدئوی اموزشی با کیفیت 720

برای دانلود فایل کلیک کنید

حجم :  12 کیلوبایت

پسورد فایل ها (تمامی حروف حتی اعداد به اینگیلیسی و حروف کوچک) :      www.98ip.irzoom efact zoom efact zoom efact zoom efact zoom efact zoom efact zoom efact

بازدیدها: 232

درباره نویسنده

مطالب مرتبط

نظر بدهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *