• illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید تا کنون 6251 نفر در 14 دوره آموزشی سون لرن ثبت نام کرده اند !
12 6937 ۱۸ آبان ۹۳ s.alifarrokh

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

کد های html:

کد های Css:

توضیح

در واقع ما در این تکنیک تعیین کردیم که هنگامی که موس روی تصویر ما قرار گرفت opacity یا شفافیت اون به کمترین درجه برسه و باعث دیده شدن بک گراند باکسی بشه که درون اون قرار داره و این یعنی این که اون ایکون لایه ی تیره ای که ایجاد میشه مال باکس پشت سر تصویر هست.

همچنین ما سایز ایکون یا بک گراند باکس پشتی رو ابتدا روی 1% تنظیم کردیم ولی تعیین کردیم که با اومدن موس کاربر روی باکس اون بک گراند تغییر سایز بده و بزگتر بشه.

در اخر هم با استفاده از خاصیت ترانزیشن Css3 حالت انیمشنی و نرم رو اعمال کردیم.

امیدوارم این مطلب بدردتون بخوره.

نوع کد رايگان

دیدگاه ها 12 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏
    بردیا راستین(۱۸ آبان ۱۳۹۳)

    این جور کد ها واقعا عالی و کاربردیه لطفا بیشتر از این جور کدها بزارید مرسی.

  • ‏‏

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

    پیروز باشی

  • ‏‏

    عالی بود،درود بر شما.

  • ‏‏
    Mr.Shahabi(۲۰ آبان ۱۳۹۳)

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

    • ‏‏
      سید علی(۲۰ آبان ۱۳۹۳)

      سلام
      این کلا داستانش متفاوت میشه.باید یه div ایجاد کنین و خواص بوردر و سایه رو بهش بدین و بک گراندش رو هم برابر با تصویرتون قرار بدین.سپس یه div دیگه توش بنویسین و متن و یا …. رو داخل اون بذارید.سپس معین کنید که در حالت معمولی opacity اون صفر و در هنگام هاور opacity ش افزایش پیدا کنه.اضافه کردن افکت هم روی این زیاد کاری نداره ولی بازم اگه به مشکل بر خوردید در انجمن مطرح کنید.

  • ‏‏

    با سلام و تشکر از مطالب کاربردیتون
    می خواستم بدونم آیا راهی وجود دارد که بدون نیاز به ایجاد کلاس یا فایل جداگانه به طور مستقیم کدهای CSS را در کار همان کدهای html وارد کنم. اگر امکان این کار هست آنرا هم آموزش می دهید؟
    با تشکر

  • ‏‏

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

  • ‏‏

    با سلام

    من از اسکریپت شبکه اجتماعی استفاده می کنم ولی نمی دونم کد html رو در کجا باید قرار دهم
    چون دارای فایلها و پوشه های زیادی می باشد , لطفا راهنماییم کنید

    نام اسکریپت: crea8social

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

    به دلیل خریداری این اسکریپت نمی توانم لینک دانلود را قرار دهم (از این بابت معذرت می خواهم)

    دمو
    http://codecanyon.net/item/crea8social-php-social-networking-platform-v13/full_screen_preview/9211270

    با تشکر از شما

  • ‏‏
    دیزاینر(۱۵ بهمن ۱۳۹۳)

    خیلی خیلی اموزش خوبی بود

  • ‏‏
    پیمان(۹ اسفند ۱۳۹۳)

    واقعا عالی بود
    خیلی ممنون 😎 😎 😎

  • ‏‏
    mehdi vali(۳ آذر ۱۳۹۴)

    دمتون گرم علی بود ممنون

  • ارسال دیدگاه

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram