في هذا الشرح سنتعرف على تأثير رائع عند تمرير الماوس على رابط الأقسام في المنتدى 

نقوم بتعديل ملف css الخاص بإستايل المنتدى 

نبحث عن  title_n ونقوم بالتعديل بإضافة الكود التالي 

.title_n {

     font-family: "Droid Arabic Kufi","tahoma",sans-serif;

     font-size: 13px;

     font-weight: bold;

     padding-top: 8px;

     padding-right: 5px;

     position: relative;

   z-index: 1;

     display: inline-block;

   vertical-align: middle;

   -webkit-transform: perspective(1px) translateZ(0);

   transform: perspective(1px) translateZ(0);

   box-shadow: 0 0 1px rgba(0, 0, 0, 0);

   position: relative;

   -webkit-transition-property: color;

   transition-property: color;

   -webkit-transition-duration: 0.3s;

   transition-duration: 0.3s;

     

 }

 .title_n::before {

   content: "";

   position: absolute;

   z-index: -1;

   top: 0;

   left: 0;

   right: 0;

   bottom: 0;

   background: #2098D1;

   -webkit-transform: scaleX(0);

   transform: scaleX(0);

   -webkit-transform-origin: 0 50%;

   transform-origin: 0 50%;

   -webkit-transition-property: transform;

   transition-property: transform;

   -webkit-transition-duration: 0.3s;

   transition-duration: 0.3s;

   -webkit-transition-timing-function: ease-out;

   transition-timing-function: ease-out;

 }

 .title_n:hover, .title_n:focus, .title_n:active {

   color: white;

 }

 .title_n:hover:before, .title_n:focus:before, .title_n:active:before {

   -webkit-transform: scaleX(1);

   transform: scaleX(1);

 } 

نعاين بعد ذلك نتيجة التعديل 

أرجو أن ينال الشرح إستحسانكم