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

33

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

امروز مسترکد تصمیم دارد اولین مقاله ی آموزشی از سری مقالات آموزشی کار با CSS و HTML را به کاربران عزیزش تقدیم کند. چیزی که امروز قرار است با هم نحوه ی انجام دادنش را یاد بگیریم این است که کاری کنیم وقتی در نوشته های سایتمان، کسی نشانگر ماوس را بر روی تصاویر میبرد، تصاویر کم رنگ شوند و به قرار گرفتن ماوس بر روی آنها واکنش نشان دهند. برای کسانی که هیچ اطلاعاتی در زمینه کار با CSS ندارند هم این را بگوییم که به حالت قرارگیری ماوس بر روی هر چیزی، hover میگوییم و الان هم میخواهیم کاری کنیم که تصاویر ما به حالت hover ماوس واکنش دلخواه ما را نشان دهند.

نتیجه ای که در پایان کار تصمیم داریم به آن دست پیدا کنیم، دقیقا مانند همان حالتی است که در تصویر ابتدای این نوشته به شما نمایش داده شده. کلاس های CSS را نیز به نحوی تنظیم کرده ایم که در صورتی که از یک قالب استاندارد وردپرسی استفاده کنید، به سادگی با کپی و پیست کردن این استایلها در فایل style.css قالبتان میتوانید به نتیجه ی دلخواه دست پیدا کنید.

برای کمرنگ کردن تصویر در هنگام قرار گرفتن ماوس بر روی آن نیاز داریم که opacity آن را تغییر دهیم. برای این کار از کد زیر استفاده می کنیم :

اگر دقت کرده باشید هوای اینترنت اکسپلورر را هم داشتیم و برای آن هم یک خط استایل نوشته ایم که نمایش تصاویرمان در همه مرورگر ها یکسان باشد. توجه داشته باشید که مقدار کم رنگ شدن تصویر را میتوانید با تغییر مقدار نوشته شده در خط دوم و خط سوم تغییر دهید (مقدار 0.6 و عدد 60) تا نتایج دلخواه حاصل شود.

اما کدی که در بالا نوشته ایم هنوز یک کمبود دارد. مشکلی که وجود دارد این است که در این حالت اگر ماوس را بر روی تصویرهای درون نوشته تان ببرید، کم رنگ شدن تصویر بسیار سریع و در یک چشم بر هم زدن اتفاق می افتد. چنین سرعتی در ایجاد تغییر در المنت ها اصلا زیبا نیست. پس بیایید این تغییر را کمی کند تر کرده و به تاخیر بیاندازیم. برای این کار کد بالا را به شکل زیر تغییر می دهیم :

سرعت تغییر حالت در تصاویر را میتوانید با تغییر زمان 0.5 ثانیه که در کد بالا درج شده تغییر دهید. هرچه این رقم را بالاتر ببرید (مثلا 2s) سرعت نمایش افکت کند تر خواهد شد و زمان بیشتری لازم است منتظر بمانید تا افکت به صورت کامل اجرا شود. حواستان باشد که این عدد 5 بار و برای مرورگر های مختلف در کد بالا تکرار شده است. بنابراین در صورتی که مایلید در آن تغییری ایجاد کنید، حتما هر 5 عدد را تغییر داده و از معادل بودن آنها اطمینان حاصل کنید.

حالا میخواهیم یک کار خوشمزه تر انجام دهیم. میخواهیم کاری کنیم که تصاویر در حالت عادی کم رنگ باشند و وقتی کاربر ماوس را روی آنها قرار میدهد، پر رنگ شده و رنگ طبیعی خود به نمایش در بیایند. برای انجام این کار به کد زیر نیاز دارید :

به همین سادگی یاد گرفتیم کاری کنیم که تصاویر درج شده در نوشته های سایتمان به قرار گرفتن ماوس روی آنها واکنش نشان دهند. کلاس هایی که در کد های فوق استفاده کردیم بر اساس سیستم مدیریت محتوای وردپرس تنظیم شده اند. بنابراین اگر می خواهید آن را در وبسایت دیگری استفاده کنید، لازم است تغییرات اندکی در کد ها اعمال کرده و آنها را با ساختار وبسایت خود هماهنگ کنید. ولی برای وردپرسی ها طبق معمول همه چیز آماده و مهیاست.

در آینده با آموزش های دیگری در زمینه ی کار با CSS در خدمت شما مسترکدی های عزیز خواهیم بود.

دسترسی آسان به این مطلب لینک کوتاه :
شاید از اینها هم خوشتان بیاید!
33 دیدگاه
  1. حميد می گوید

    وااای عالی بود!

  2. بهمن می گوید

    سلام
    دوست من یه مشکلی وجود داره
    وقتی ماوس به روی عکس میره خیلی خوب عکس تغییر رنگ میده ولی ماوس که از روی عکس میره یهو رنگ به خالت اول برمیگرده

    چطور میشه با همون سرعتی متناسبی که رنگ روشن میشه وقتی ماوس میره اونور با همون سرعت تدریجی و متناسب به حجالت اول برگرده و یهو تغییر رنگ نده؟

    سوال بعدی این که چطور میشه کاری کنیم فقط عکسهای لینک دار شامل این طرح بشن و عکسهایی که لینک بهشون ندادیم تغییر رنگ ندن؟

    1. MrCode می گوید

      سلام
      برای انجام این کار، 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 */
      }

      1. بهمن می گوید

        واقعا ممنونم مهندس مشکل اول حل شد

        اما مشکل دوم رو هنوز دارم. درواقع میخوام فقط عکسهایی که لینک دار هستن شامل این کد کمرنگ شدن بشن و عکسهایی که هیچ لینکی ندارن مثل سابق بمونن
        راهی داره؟

      2. MrCode می گوید

        خواهش میکنم.
        شرمنده من یادم رفت این بخش رو جواب بدم.
        عکسی که لینک داره یعنی وقتی تگ img توی تگ a قرار گرفته باشه.
        بنابراین به عنوان مثال استایل رو میتونیم اینجوری بنویسیم :


        a img {
        استایل مورد نظر در اینجا
        }

        این میشه دقیقا همون استایل قبل با این تفاوت که فقط روی img هایی که توی تگ a باشن کار میکنه.

      3. بهمن می گوید

        تشکر میکنم مشکلم حل شد

        آیا راهی هست فقط عکسهایی که لینک دارن (یعنی عکسهایی که وقی ماوس میره روش شبیه دست میشه و قابلیت کلیک کردن دارند) به این حالت کمرنگ شدن در بیان و تصاویری که کلیک پذیر نیستن ساده بمونن؟

      4. MrCode می گوید

        خواهش میکنم. بنده دیروز در جواب کامنتتون به صورت جداگانه به همین سوالتون پاسخ دادم.

      5. بهمن می گوید

        واقعا تشکر میکنم مشکل کاملا حل شد و الان فقط عکسهایی که لینک دار هستند به این حالت در میان خیلی عالی شده

      6. MrCode می گوید

        خواهش میکنم. خوشحالم که تونستم کمکی کرده باشم.

      7. بهمن می گوید

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

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

        با تشکر

      8. MrCode می گوید

        سلام
        در این حالت باید این افکت رو فقط برای تصاویری که دارای کلاس خاصی هستند تعریف کنید.
        و یا با استفاده از سلکتور :not() کلاسی رو که میخواید شامل این افکت نشه تعیین کنید.
        راهنمای سلکتور :not() :
        http://www.w3schools.com/cssref/sel_not.asp

      9. بهمن می گوید

        آقا یه دنیا ممنون اینم حل شد <3

        یه سوال دیگه
        من یه کد html مثلا در بخش کامنتها یا فوتر پوسته گذاشتم
        الان میخوام این استایل فقط در پستها خودشو نشون بده و در برگه ها نمایش داده نشه
        چه کدی باید اولش اضافه کنم که دستور فقط برای پستها صادر بشه و در برگه ها عمل نکنه؟؟

      10. MrCode می گوید

        خواهش میکنم.

        متوجه سوالتون در مورد کد html تون نشدم.
        بهتر هست برای مطرح کردن سوالاتی که به آموزش درج شده در سایت مرتبط نیست از فروم های پشتیبانی استفاده کنید و یا اینکه در سایتی مثل پونیشا پیشنهاد بدید براتون انجامش بدن.

    2. بهمن می گوید

      سلام
      والا من که سوادم در حد شما نیست مهندس جان <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 شامل دستور فوق نشه رو برای من میفرستید لطفا

      با تشکر

      1. MrCode می گوید

        سلام

        استایل 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">

    3. zoha می گوید

      سلام میشه بپرسم دوستتون از چه دستوری واسه تغییر رنگ عکس موقع رفتن موس روی اون استفاده کرده؟ممنون

  3. علی می گوید

    یه سوال چجوری باید کاری کنیم که کلا یه عکس دیگه بیاد ؟ یعنی اپسیتیش کم نشه کلا عوض بشه .
    ممنون میشم جواب بدید

    1. MrCode می گوید

      از این لینک کمک بگیرید :
      http://stackoverflow.com/questions/18813299/changing-image-on-hover-with-css-html

  4. عاشقم{عاشق برنامه نویسی} می گوید

    سلام
    چطور میتونم منویی مثل منوی کشویی سایت شما داشته باشم؟

  5. کیمیا می گوید

    سلام
    چطور میشه وقتی موس روی تصویر میاد رنگ تصویر تیره بشه ولی تصاویر هنوز شفاف باشن و دیده بشن مثل تصاویر لینک زیر:
    ضمنا ممنون میشم اگر بعدش بگید چطور میشه اون نوشته یا تایتل عکس ها هم وقتی عکس تیره میشه روشون بیاد

    1. MrCode می گوید

      سلام
      توی لینک مورد نظرتون، در واقع تصویر تیره نمیشه. از ابتدا یک div با رنگ مشکی ترنسپرنت و نوشته روی عکس هست که پارامتر display اش روی none تنظیم شده. وقتی شما روی عکس میرید، پارامتر display اون div به block تغییر میکنه و شما اون لایه ی اضافی رو مشاهده میکنید. هرچند به نظرتون میاد که تصویر تیره شده، ولی در واقع اینطور نیست و لایه ی جدیدی روی تصویر اضافه شده.

  6. رضا می گوید

    سلام و وقت بخیر.

    بنده در در بهش سایدبار خود یک عکسی دارم که لینکش کردم به یک وبسایت دیگه از این کد هم استفاده کردم و فقط عکس های مطالب داخل وبسایت رنگش عوض میشه عکسی هایی که در سابدرا دارم متاسافنه نمیشه. این کد را کپی کردم ببیند موردی است؟

    }
    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;
    }
    }

    1. MrCode می گوید

      سلام
      کدی که نوشتید فقط روی تصاویری که در پستهاتون باشه موثر هست (post img) و تاثیری روی سایدبار نداره. باید ببینید کلاس سایدبارتون چیه و کد رو بر اون اساس تغییر بدید.

  7. amir mo می گوید

    سلام
    من مبتدی ام
    خییلی

    در حدی که نمیدونم کد رو کجا بزارم
    داخل تگ img ?
    کجا?

    1. MrCode می گوید

      در فایل css

  8. amir mo می گوید

    بازم سلام

    مگه کد ، کد html نیس?

    اگه نیس میشه html اش رو بزارید

    1. MrCode می گوید

      دوست عزیز آموزش css هست اگر توجه کنید!

  9. hassanali می گوید

    ممنون خیلی کمک کرد

  10. سارا می گوید

    سلام ممنون از راهنماییتون، ولی من میخوام اون رنگ مثلا صورتی که ماوس اور هست رو کمرنگ کنم یا رنگشو تغییر بدم، همین کدی که نوشتید در متن کمک می کنه؟ یا فرق می کنه؟
    من اون کد رو گذاشتم ولی تغییری نکرد.

    1. سارا می گوید

      راستی، من داخل قالب جوملا دارم با css کار می کنم.

  11. مرجان می گوید

    سلام روزتون بخیر . من عکس طوسی دارم که میخوام وقتی موس میره روش آبی بشه
    چیکار باید بکنم؟

  12. افشاری می گوید

    سلام
    من میخوام توو سایتم یه گیف بذارم که فقط وقتی با موس میری رووش شروع به حرکت کنه. آیا این امکان وجود دارد یا نه؟
    اگر هست ممنون میشم راهنمایی ام کنید..

  13. زهرا افشار می گوید

    سلام
    دست شما درد نکنه واقعا عالی بود دیروز سایتتونو دیدم امروز باز خواستم از کدتون استفاده کنم هرچقد گشتم تو سرچ هیستوری نبودین
    کلی سرچ کردم تا پیداتون کنم باز
    خسته نباشید واقعا .

ارسال پاسخ

آدرس ایمیل شما منتشر نخواهد شد.