زوم شدن روی تصویر با قرار گرفتن موس روی آن

[مهربان]

سلام. کدی می خوام برای نمایش کاربران برتر که وقتی موس روی هر کاربر میره زوم میشه دقیقا شبیه به تصویر زیر :
http://uupload.ir/files/yzh_sled.jpg
مثال سایت takdokhtar.ir

[e.b35927]

فکر نکنم کد جاوا باشه!
با css هم میشه
فکر کنم استایل زیر رو به آواتار بدید بشه!

کد:

.avatar:hover}
    transform:scale(2,2);
    transition:.5s all;
}

اون 2 و 2 یعنی از لحاظ طولی و عرضی 2 برابر بشه!

و اون نیم هم یعنی نیم ثانیه طول بکشه تا بزرگ بشه!

[مهربان]

ممنون ولی برای آواتار ارسال کننده ها نمی خوام.
می خوام زیر هدر قرار بدم به صورت افقی. اینجوری فکر نکنم بشه! یعنی چیزی که توی این سایت هست کد جاوا نیست؟:

takdokhtar.ir

[e.b35927]

فرقی نداره!

هر جا بخواین میتونین استفااده کنین!

اگه این استایل رو به عکس بدین عکسا زوم میشن!

[firstboy000]

از این کلاس استفاده کنید که سایر موارد رو تحت تاثیر نذاره

کد:

.avatarzoom:hover{
    transform:scale(2,2);
    transition:.5s all;
}

حالا هرجا که خواستید ایجادش کنید این کلاس رو روی شی فراخوانی کنید.

[مهربان]

ممنون دوستان یعنی کجا قرارش بدم؟ قبل از تصویر؟ بعد از تصویر؟!

[firstboy000]

توی global.css پوستت بذارش، بعد مثلا تگ img رو اینطور بنویس:

کد:

<img src="address aks" class="avatarzoom">

[مهربان]

مرسی
تا اینجا نصفش میشه گفت درست شده و ممنونم. اما چنتا مشکل دارم باهاش


1- بینشون فاصله زیاده که به خاطر زوم شدنه و اینجوری زشت میشه. میخوام کنار هم باشن و وقتی زوم میشه یکی اگر بیفته روی آیکونای کناریش مشکلی نباشه
2- وقتی موس میره روش آروم زوم میشه و وقتی موس رو برمیدارم سریع کوچیک میشه و آروم آروم برنمیگرده
راه حلش چیه>