PDA

توجه ! این یک نسخه آرشیو شده میباشد و در این حالت شما عکسی را مشاهده نمیکنید برای مشاهده کامل متن و عکسها بر روی لینک مقابل کلیک کنید : چگونگی ایجاد تصاویر Hover



ExtremeSport
2012/06/13, 10:02 PM
سلام دوستا خسته نباشید

من یه تصویری دارم میخوام کاری کنم که وقتی موس رفت روش دو تا حالت به وجود بیاد :

1-مثلا تصویر X به تصویر Y تغییر کنه

2-تصویر بزرگ بشه

ممنون میشم این دو مورد رو به من آموزش بدید

Amir Lord
2012/06/14, 01:28 AM
این هارو باید دَر یَخشِ css مَطرح کُنید !

مُنتَقل شُد.

jcs.w
2012/06/14, 02:58 AM
اول ميتونيد تصويرو با دستور background image با خودد css بياريد كه كدش به اين شكل ميشه :

.parssoft {
Background-image:url('siminsecret.png')
/*size for all browsers*/
background-size: 40px 50px;
-ms-background-size: 40px 50px;
-o-background-size: 40px 50px;
-webkit-background-size: 40px 50px;
-moz-background-size: 40px 50px;
}
.parssoft:hover {
Background-image:url('siminsecretover.png')
/*size for all browsers*/
background-size: 80px 100px;
-ms-background-size: 40px 50px;
-o-background-size: 80px 100px;
-webkit-background-size: 80px 100px;
-moz-background-size: 80px 100px;
}
يا اگه ميخواين با div تصويرو بيارين توي hover ميتونيد فقط width و height رو عوض كنيد . ولي فكر نكنم با div بتونيد عكسو عوض كنيد (مشخصا با سي اس اس)يه راهي هست كه ميتونيد عكسو محو كنيد و توي css hover يه بك گراند بزاريد .
براي بزرگ شدن هم ميتونيد به جاي تغيير width و height و background size از دستور ترنسفورم استفاده كنيد :

parssoft{
transform: scale(2,4);
-ms-transform: scale(2,4);
-webkit-transform: scale(2,4);
-o-transform: scale(2,4);
-moz-transform: scale(2,4);
}

اگه هم ميخواين به صورت انيميشيني در بيارين ميتونيد keyframe در بيارين .

Mr.Ramin
2012/06/14, 10:11 AM
از دستور زیر هم برای Fed-er یا حالت تغییر آهسته میتونید استفاده کنید .

*{-webkit-transition:all 0.2s ease-in;-moz-transition:all 0.2s ease-in;-o-transition:all 0.2s ease-in;}