افکت hover برای لینک یا متن

این داستان: hover

در این مطلب قصد ساخت افکتی برای زمانی که متنی را hover می کنیم, داریم. این ترفند توسط wesbos@ در این پست معرفی شده است.

پیشنیازها

  1. انتخابگر hover
  2. گرادینت خطی
  3. ترنزیشن

 

دموی نهایی

 

See the Pen Fun hover effect by Mojtaba Seyedi (@seyedi) on CodePen.


 

 

نحوه ساخت

اول از همه با استفاده از گرادینت خطی به حالت زیر می رسیم:

 


a {
  background-image: linear-gradient(to left, #25B0A9 50%, #FF5722 50%); 
}

 
مرحله اول استفاده از گرادینت
 

حال کافی است که با دو برابر کردن اندازه background-size باعث شویم تا فقط یک رنگ از دو رنگ دیده شود:

 


a {
  background-image: linear-gradient(to left, #25B0A9 50%, #FF5722 50%); 
  background-size: 200%; /* دو برابر کردن اندازه پس زمینه */
}

 

قدم دوم دوبرابر کردن اندازه پس زمینه
 

سپس مکان پس زمینه را با استفاده از ویژگی background-position در زمان hover به اندازه 100 درصد پس زمینه جابه جا می کنیم تا به نتیجه دلخواه برسیم.

 


a {
  background-image: linear-gradient(to left, #25B0A9 50%, #FF5722 50%); 
  background-size: 200%; /* دو برابر کردن اندازه پس زمینه */
  background-position: 0;
}

a:hover {
  background-position: 100%;
}

 

تصویر زیر یک شبیه سازی برای درک بهتر از اتفاقی که می افتد, می باشد:
 
مرحله سوم تغییر مکان پس زمینه در زمان hover
 

و در مرحله آخر با استفاده از ترنزیشن به نتیجه دلخواه می رسیم:

 


a {
  background-image: linear-gradient(to left, #25B0A9 50%, #FF5722 50%); 
  background-size: 200%; /* دو برابر کردن اندازه پس زمینه */
  background-position: 0;
  transition: background 0.4s;
}

a:hover {
  background-position: 100%;
}

 

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

 


background-image: linear-gradient(to left, #25B0A9 50%, transparent 50%);

 

و اینکه اگر دنبال این هستید که بصورت دو زبانه (دو جهته) از این تکنیک استفاده کنید, دموی زیر را بررسی کنید:
 

See the Pen bi-direction hover effect by Mojtaba Seyedi (@seyedi) on CodePen.


 

افکت ما هم آماده است,
شاد باشید… :)

سوالت رو توی پنل بحث و گفتگو مطرح کن.

19 دیدگاه برای “این داستان: hover

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

  2. سلام
    ممنون از وب سایت و مطالب متفاوتی که می گذارید
    یک سوال دارم
    می خوام کاری کنم که وقتی ماوس روی نوشته می رود از پایین به بالا رنگ background تغییر کند.
    برای این کار جهت gradient رو to top گذاشتم اما نشد

    ممنون می شم راهنمایی بفرمایید

  3. سلام و عرض ادب
    تشکر بابت مطلبتون
    یک سوال داشتم
    چجوری شده که این hover خط به خط اجرا میشه؟
    یعنی اول خط اول بعد خط دوم و بعد خط سوم
    چرا همه خط ها در یک زمان تغییر پیدا نمی کنند؟

  4. سلام
    چطوری میشه با hover روی چند المنت دیگر تاثیر گذاشت مثلا وقتی عنصری hover شد چند المنت دیگر رنگ بک گراندشون تغییر کنه؟

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *