تغییر تصویر با رفتن موس بروی ان

[mohsen.nsb44]

سلام چطور میتونم کاری مشابه سایت زیر انجام بدم
http://www.gajetcamp.in/
با رفتن به روی توضیحات محصول متوجه منظورم میشید
با تشکر

[frednasri]

سلام.

در واقع اون یه عکسه (http://www.gajetcamp.in/wp-content/uploads/shekar-image/2013/10/z222222222221.jpg) که هر دو حالت توش هست و با رفتن ماوس روش (hover) با css موقعیتش عوض میشه و حالت دوم نمایش داده میشه.

کد اولیه اینه:

a.des {
background: rgba(0, 0, 0, 0) url("http://www.gajetcamp.in/wp-content/uploads/shekar-image/2013/10/z222222222221.jpg")
no-repeat scroll 0 3px;
float: right;
height: 40px;
width: 95px;
}

و کد hover اینه که فقط موقعیت نمایش همون عکس رو تغییر می ده و اون رو به صورت عمودی 48 پیکسل بالا می بره (48px-):

a.des:hover {
background: rgba(0, 0, 0, 0) url("http://www.gajetcamp.in/wp-content/uploads/shekar-image/2013/10/z222222222221.jpg")
no-repeat scroll 0 -48px;
}

موفق باشید.

[mohsen.nsb44]

یه مسله وقتی از کد بالا استفاده میشود تصویر پایین جایگزین تصویر بالا میشه
اما تو سایتی که ادرسشو ذکر کردم
تصویر بالا به سمت بالا حرکت میکنه و تصویر دوم از پایین میاد

[frednasri]

یه مسله وقتی از کد بالا استفاده میشود تصویر پایین جایگزین تصویر بالا میشه
اما تو سایتی که ادرسشو ذکر کردم
تصویر بالا به سمت بالا حرکت میکنه و تصویر دوم از پایین میاد

سلام.

اون در واقع یه transition تو css هست که به تگ هایی که تصویر توشه اضافه شده.

برای این کار کد transition رو (خط آخر) به بلوک اول کدی که فرستادم اضافه کنید تا درست بشه. یعنی بلوک اول باید اینجوری بشه:

a.des {
background: rgba(0, 0, 0, 0) url("http://www.gajetcamp.in/wp-content/uploads/shekar-image/2013/10/z222222222221.jpg")
no-repeat scroll 0 3px;
float: right;
height: 40px;
width: 95px;
transition: all 0.2s linear 0s;
}

موفق باشید.

[mohsen.nsb44]

ممنون از راهنماییت اگه یه توضیحی هم بدی در مورد همین کد ممنون میشم
مثلا کلمه all که استفاده شده و linear
و کلا transition برای چه کارهای میشه ازش استفاده کرد
ممنون

[سعید کشاورز]

از این پلاگین هم میتونی استفاده کنی
برای hover کردنه شاید به دردت بخوره تو پروژه هات
https://github.com/gudh/ihover

[frednasri]

ممنون از راهنماییت اگه یه توضیحی هم بدی در مورد همین کد ممنون میشم
مثلا کلمه all که استفاده شده و linear
و کلا transition برای چه کارهای میشه ازش استفاده کرد
ممنون

خواهش می کنم.

transition یه افکته که این امکان رو به یه المان می ده از یه حالت به یه حالت دیگه تغییر شکل بده، رنگش عوض بشه، موقعیتش عوض بشه، محو بشه، ظاهر بشه و .... (یعنی خاصیت های css المان تغییر کنه) و با دادن زمان اجرای موردنظر، این افکت ها می تونن به صورت تدریجی کامل بشن و حتی با یه وقفه زمانی خاص.

برای اطلاعات بیشتر در مورد اینکه transition چی هست و چگونه میشه ازش استفاده کرد، لینکهای زیر رو ببینید.

لینک یک (http://developer1.ir/CSS_3/transition.aspx)
لینک دو (http://w3.webmehraz.ir/css3/css3_transitions.aspx)
لینک سه (http://www.iranweblearn.com/css/transition-%D8%AF%D8%B1-css3)
لینک چهار (http://www.w3schools.com/css/css3_transitions.asp)
لینک پنج (http://www.css3.info/preview/css3-transitions/)

all یه میانبره که وقتی به کار میره که شما می خواین مثلاً توی hover چندین خاصیت css مربوط به یه المان خاص رو (مثلاً background، width، height) به طور همزمان بهش transition بدید. به عنوان مثال دو بلوک کد زیر، transition رو توی همه خاصیت هایی که ما تو بلوک مربوط به hover دوباره آوردیم اعمال میکنه (ظرف مدت 3 ثانیه). منظور از linear، شکل اجرای transition هست و اون عدد بعد از linear (که در اینجا 0s هست)، مشخص می کنه که transition بعد از چند ثانیه وقفه یا delay شروع به اجرا کنه:

a.des {
background: rgba(0, 0, 0, 0) url("http://www.gajetcamp.in/wp-content/uploads/shekar-image/2013/10/z222222222221.jpg")
no-repeat scroll 0 3px;
float: right;
height: 40px;
width: 95px;
transition: all 3s linear 0s;
}

a.des:hover {
background: rgba(0, 0, 0, 0) url("http://www.gajetcamp.in/wp-content/uploads/shekar-image/2013/10/z222222222221.jpg")
no-repeat scroll 0 -48px;
height: 60px;
width: 75px;
}

در اینجا اگه از all استفاده نشه، باید تمام خاصیت های مورد نظر رو با transition بیاریم. مثل این:

a.des {
background: rgba(0, 0, 0, 0) url("http://www.gajetcamp.in/wp-content/uploads/shekar-image/2013/10/z222222222221.jpg")
no-repeat scroll 0 3px;
float: right;
height: 40px;
width: 95px;
transition: background 3s linear 0s,
width 3s linear 0s,
height 3s linear 0s;
}

a.des:hover {
background: rgba(0, 0, 0, 0) url("http://www.gajetcamp.in/wp-content/uploads/shekar-image/2013/10/z222222222221.jpg")
no-repeat scroll 0 -48px;
height: 60px;
width: 75px;
}

توجه داشته باشید که به هر حال با hover خاصیت هایی که ما تعریف کردیف اجرا میشن، اما اینجا فرقش اینه که اون خاصیت های خاصی که ما تو transition گذاشتیم ظرف مدت 3 ثانیه تکمیل میشن و نه بلافاصله.

پس تو پاسخ های قبلی، چون ما فقط داریم transition رو روی یه دونه خاصیت css (در اینجا background) اعمال می کنیم، شما می تونید به جای all تو transition از background استفاده کنید یعنی transition فقط روی این خاصیت اجرا بشه:

a.des {
background: rgba(0, 0, 0, 0) url("http://www.gajetcamp.in/wp-content/uploads/shekar-image/2013/10/z222222222221.jpg")
no-repeat scroll 0 3px;
float: right;
height: 40px;
width: 95px;
transition: background 0.5s linear 0s;
}

a.des:hover {
background: rgba(0, 0, 0, 0) url("http://www.gajetcamp.in/wp-content/uploads/shekar-image/2013/10/z222222222221.jpg")
no-repeat scroll 0 -48px;
height: 60px;
width: 75px;
}

تو کد بالا، تغییر background ظرف نیم ثانیه انجام میشه اما تغییرات مربوط به width و height بلافاصله بعد از hover صورت می گیره چون ما transition برای این دو خاصیت تعریف نکردیم.

موفق باشید.

[Sameboy0511]

دوست عزیز شما میتونی برای تگ های تصویرت فیلتر تنظیم کنی،اینجوری هم از یک عکس استفاده میکنی و هم حجم کمتری اشغال میکنه

کدهاش هم به اینصورت هست:



.img{
filter: brightness(0.8);
-webkit-filter: brightness(0.8);
}
img:hover{
filter: brightness(1);
-webkit-filter: brightness(1);
}


با این کد بالا تمام عکس ها یکم تیره به نظر میرسن و فرد وقتی روی عکس بره روشنایی اصلی تصویر رو بدست میارن

موفق باشید:لبخندساده: