اموزش ویدئویی 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%;

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

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

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

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

کد کل کار

 

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

 

 

بخش دانلود

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

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

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

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

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

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

بازدید: 0

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

مطالب مرتبط

نظر بدهید

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