در آن مطلب نیت و اراده ساخت افکتی جهت زمانی که متنی را hover می کنیم, داریم. قبل از هر چیز مفاهیم زیر را به عنوان پیشنیاز معرفی می کنیم:

پیشنیازها

دموی نهایی

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 به مقدار و اندازه ۱۰۰ قسمت و بخش پس باره جابه جا می کنیم تا به پس نتیجه آن می شود که دلخواه برسیم.

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


a:hover 
background-position: 100%;

تصویر زیر یک شبیه سازی جهت درک بهتر از اتفاقی که می افتد, می باشد:
 

 

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

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.

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