آموزش ایجاد افکت کم رنگ شدن تصویر با رفتن ماوس روی آن
امروز مسترکد تصمیم دارد اولین مقاله ی آموزشی از سری مقالات آموزشی کار با CSS و HTML را به کاربران عزیزش تقدیم کند. چیزی که امروز قرار است با هم نحوه ی انجام دادنش را یاد بگیریم این است که کاری کنیم وقتی در نوشته های سایتمان، کسی نشانگر ماوس را بر روی تصاویر میبرد، تصاویر کم رنگ شوند و به قرار گرفتن ماوس بر روی آنها واکنش نشان دهند. برای کسانی که هیچ اطلاعاتی در زمینه کار با CSS ندارند هم این را بگوییم که به حالت قرارگیری ماوس بر روی هر چیزی، hover میگوییم و الان هم میخواهیم کاری کنیم که تصاویر ما به حالت hover ماوس واکنش دلخواه ما را نشان دهند.
نتیجه ای که در پایان کار تصمیم داریم به آن دست پیدا کنیم، دقیقا مانند همان حالتی است که در تصویر ابتدای این نوشته به شما نمایش داده شده. کلاس های CSS را نیز به نحوی تنظیم کرده ایم که در صورتی که از یک قالب استاندارد وردپرسی استفاده کنید، به سادگی با کپی و پیست کردن این استایلها در فایل style.css قالبتان میتوانید به نتیجه ی دلخواه دست پیدا کنید.
برای کمرنگ کردن تصویر در هنگام قرار گرفتن ماوس بر روی آن نیاز داریم که opacity آن را تغییر دهیم. برای این کار از کد زیر استفاده می کنیم :
1 2 3 4 | .post img:hover { opacity:0.6; filter:alpha(opacity=60); /* For IE8 and earlier */ } |
اگر دقت کرده باشید هوای اینترنت اکسپلورر را هم داشتیم و برای آن هم یک خط استایل نوشته ایم که نمایش تصاویرمان در همه مرورگر ها یکسان باشد. توجه داشته باشید که مقدار کم رنگ شدن تصویر را میتوانید با تغییر مقدار نوشته شده در خط دوم و خط سوم تغییر دهید (مقدار 0.6 و عدد 60) تا نتایج دلخواه حاصل شود.
اما کدی که در بالا نوشته ایم هنوز یک کمبود دارد. مشکلی که وجود دارد این است که در این حالت اگر ماوس را بر روی تصویرهای درون نوشته تان ببرید، کم رنگ شدن تصویر بسیار سریع و در یک چشم بر هم زدن اتفاق می افتد. چنین سرعتی در ایجاد تغییر در المنت ها اصلا زیبا نیست. پس بیایید این تغییر را کمی کند تر کرده و به تاخیر بیاندازیم. برای این کار کد بالا را به شکل زیر تغییر می دهیم :
1 2 3 4 5 6 7 8 9 | .post img:hover{ opacity:0.6; filter:alpha(opacity=60); /* For IE8 and earlier */ -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -ms-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; } |
سرعت تغییر حالت در تصاویر را میتوانید با تغییر زمان 0.5 ثانیه که در کد بالا درج شده تغییر دهید. هرچه این رقم را بالاتر ببرید (مثلا 2s) سرعت نمایش افکت کند تر خواهد شد و زمان بیشتری لازم است منتظر بمانید تا افکت به صورت کامل اجرا شود. حواستان باشد که این عدد 5 بار و برای مرورگر های مختلف در کد بالا تکرار شده است. بنابراین در صورتی که مایلید در آن تغییری ایجاد کنید، حتما هر 5 عدد را تغییر داده و از معادل بودن آنها اطمینان حاصل کنید.
حالا میخواهیم یک کار خوشمزه تر انجام دهیم. میخواهیم کاری کنیم که تصاویر در حالت عادی کم رنگ باشند و وقتی کاربر ماوس را روی آنها قرار میدهد، پر رنگ شده و رنگ طبیعی خود به نمایش در بیایند. برای انجام این کار به کد زیر نیاز دارید :
1 2 3 4 5 6 7 8 9 10 11 12 13 | .post img { opacity:0.7; filter:alpha(opacity=70); /* For IE8 and earlier */ } .post img:hover{ opacity:1.0; filter:alpha(opacity=100); /* For IE8 and earlier */ -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -ms-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; } |
به همین سادگی یاد گرفتیم کاری کنیم که تصاویر درج شده در نوشته های سایتمان به قرار گرفتن ماوس روی آنها واکنش نشان دهند. کلاس هایی که در کد های فوق استفاده کردیم بر اساس سیستم مدیریت محتوای وردپرس تنظیم شده اند. بنابراین اگر می خواهید آن را در وبسایت دیگری استفاده کنید، لازم است تغییرات اندکی در کد ها اعمال کرده و آنها را با ساختار وبسایت خود هماهنگ کنید. ولی برای وردپرسی ها طبق معمول همه چیز آماده و مهیاست.
در آینده با آموزش های دیگری در زمینه ی کار با CSS در خدمت شما مسترکدی های عزیز خواهیم بود.
وااای عالی بود!
سلام
دوست من یه مشکلی وجود داره
وقتی ماوس به روی عکس میره خیلی خوب عکس تغییر رنگ میده ولی ماوس که از روی عکس میره یهو رنگ به خالت اول برمیگرده
چطور میشه با همون سرعتی متناسبی که رنگ روشن میشه وقتی ماوس میره اونور با همون سرعت تدریجی و متناسب به حجالت اول برگرده و یهو تغییر رنگ نده؟
سوال بعدی این که چطور میشه کاری کنیم فقط عکسهای لینک دار شامل این طرح بشن و عکسهایی که لینک بهشون ندادیم تغییر رنگ ندن؟
سلام
برای انجام این کار، transition ها رو روی خود img تنظیم کنید و تغییر opacity رو در حالت hover :
img {
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
img:hover{
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
}
واقعا ممنونم مهندس مشکل اول حل شد
اما مشکل دوم رو هنوز دارم. درواقع میخوام فقط عکسهایی که لینک دار هستن شامل این کد کمرنگ شدن بشن و عکسهایی که هیچ لینکی ندارن مثل سابق بمونن
راهی داره؟
خواهش میکنم.
شرمنده من یادم رفت این بخش رو جواب بدم.
عکسی که لینک داره یعنی وقتی تگ img توی تگ a قرار گرفته باشه.
بنابراین به عنوان مثال استایل رو میتونیم اینجوری بنویسیم :
a img {
استایل مورد نظر در اینجا
}
این میشه دقیقا همون استایل قبل با این تفاوت که فقط روی img هایی که توی تگ a باشن کار میکنه.
تشکر میکنم مشکلم حل شد
آیا راهی هست فقط عکسهایی که لینک دارن (یعنی عکسهایی که وقی ماوس میره روش شبیه دست میشه و قابلیت کلیک کردن دارند) به این حالت کمرنگ شدن در بیان و تصاویری که کلیک پذیر نیستن ساده بمونن؟
خواهش میکنم. بنده دیروز در جواب کامنتتون به صورت جداگانه به همین سوالتون پاسخ دادم.
واقعا تشکر میکنم مشکل کاملا حل شد و الان فقط عکسهایی که لینک دار هستند به این حالت در میان خیلی عالی شده
خواهش میکنم. خوشحالم که تونستم کمکی کرده باشم.
سلام مهندس گرامی
یه مشکلی برام پیش اومده برگشتم به این پست قدیمی از شما کمک بگیرم
چطور میشه یه سری عکسهای خاص شامل این کد نشن. یعنی همه عکسها با رفتن موس روشون کمرنگ بشن به جز 5 تا عکس. اون 5 تا عکس رو چه کدی بدیم که شامل این اتفاق نشن؟
با تشکر
سلام
در این حالت باید این افکت رو فقط برای تصاویری که دارای کلاس خاصی هستند تعریف کنید.
و یا با استفاده از سلکتور :not() کلاسی رو که میخواید شامل این افکت نشه تعیین کنید.
راهنمای سلکتور :not() :
http://www.w3schools.com/cssref/sel_not.asp
آقا یه دنیا ممنون اینم حل شد <3
یه سوال دیگه
من یه کد html مثلا در بخش کامنتها یا فوتر پوسته گذاشتم
الان میخوام این استایل فقط در پستها خودشو نشون بده و در برگه ها نمایش داده نشه
چه کدی باید اولش اضافه کنم که دستور فقط برای پستها صادر بشه و در برگه ها عمل نکنه؟؟
خواهش میکنم.
متوجه سوالتون در مورد کد html تون نشدم.
بهتر هست برای مطرح کردن سوالاتی که به آموزش درج شده در سایت مرتبط نیست از فروم های پشتیبانی استفاده کنید و یا اینکه در سایتی مثل پونیشا پیشنهاد بدید براتون انجامش بدن.
سلام
والا من که سوادم در حد شما نیست مهندس جان <3
اگه میشه در حد ابتدایی با من صحبت کنید 🙂
الان فرض بگیریم من یک عکس در هاستم آپلود کردم به اسم : ax.gif و یک عکس به اسم ax2.jpg
در حال حاضر کد css من این هست:
a img:hover{
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
}
a img {
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-ms-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}
الان اگه میشه اون دستوری که باید به این کد اضافه بشه تا عکسهای ax.gif و ax2.jpg شامل دستور فوق نشه رو برای من میفرستید لطفا
با تشکر
سلام
استایل css تون یه همچین شکلی میشه :
a img:not(.noeffect):hover{
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
}
a img:not(.noeffect) {
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-ms-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}
حالا بر اساس استایل بالا، هر تصویری که کلاس noeffect رو داشته باشه، دیگه محو نمیشه.
حالا کافیه کلاس noeffect رو به هر تگ img که مایلید اضافه کنید تا شامل این افکت نشه. مثلا :
<img src="#" class="noeffect">
سلام میشه بپرسم دوستتون از چه دستوری واسه تغییر رنگ عکس موقع رفتن موس روی اون استفاده کرده؟ممنون
یه سوال چجوری باید کاری کنیم که کلا یه عکس دیگه بیاد ؟ یعنی اپسیتیش کم نشه کلا عوض بشه .
ممنون میشم جواب بدید
از این لینک کمک بگیرید :
http://stackoverflow.com/questions/18813299/changing-image-on-hover-with-css-html
سلام
چطور میتونم منویی مثل منوی کشویی سایت شما داشته باشم؟
سلام
چطور میشه وقتی موس روی تصویر میاد رنگ تصویر تیره بشه ولی تصاویر هنوز شفاف باشن و دیده بشن مثل تصاویر لینک زیر:
ضمنا ممنون میشم اگر بعدش بگید چطور میشه اون نوشته یا تایتل عکس ها هم وقتی عکس تیره میشه روشون بیاد
سلام
توی لینک مورد نظرتون، در واقع تصویر تیره نمیشه. از ابتدا یک div با رنگ مشکی ترنسپرنت و نوشته روی عکس هست که پارامتر display اش روی none تنظیم شده. وقتی شما روی عکس میرید، پارامتر display اون div به block تغییر میکنه و شما اون لایه ی اضافی رو مشاهده میکنید. هرچند به نظرتون میاد که تصویر تیره شده، ولی در واقع اینطور نیست و لایه ی جدیدی روی تصویر اضافه شده.
سلام و وقت بخیر.
بنده در در بهش سایدبار خود یک عکسی دارم که لینکش کردم به یک وبسایت دیگه از این کد هم استفاده کردم و فقط عکس های مطالب داخل وبسایت رنگش عوض میشه عکسی هایی که در سابدرا دارم متاسافنه نمیشه. این کد را کپی کردم ببیند موردی است؟
}
a img {
.post img:hover{
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
}
سلام
کدی که نوشتید فقط روی تصاویری که در پستهاتون باشه موثر هست (post img) و تاثیری روی سایدبار نداره. باید ببینید کلاس سایدبارتون چیه و کد رو بر اون اساس تغییر بدید.
سلام
من مبتدی ام
خییلی
در حدی که نمیدونم کد رو کجا بزارم
داخل تگ img ?
کجا?
در فایل css
بازم سلام
مگه کد ، کد html نیس?
اگه نیس میشه html اش رو بزارید
دوست عزیز آموزش css هست اگر توجه کنید!
ممنون خیلی کمک کرد
سلام ممنون از راهنماییتون، ولی من میخوام اون رنگ مثلا صورتی که ماوس اور هست رو کمرنگ کنم یا رنگشو تغییر بدم، همین کدی که نوشتید در متن کمک می کنه؟ یا فرق می کنه؟
من اون کد رو گذاشتم ولی تغییری نکرد.
راستی، من داخل قالب جوملا دارم با css کار می کنم.
سلام روزتون بخیر . من عکس طوسی دارم که میخوام وقتی موس میره روش آبی بشه
چیکار باید بکنم؟
سلام
من میخوام توو سایتم یه گیف بذارم که فقط وقتی با موس میری رووش شروع به حرکت کنه. آیا این امکان وجود دارد یا نه؟
اگر هست ممنون میشم راهنمایی ام کنید..
سلام
دست شما درد نکنه واقعا عالی بود دیروز سایتتونو دیدم امروز باز خواستم از کدتون استفاده کنم هرچقد گشتم تو سرچ هیستوری نبودین
کلی سرچ کردم تا پیداتون کنم باز
خسته نباشید واقعا .