هيلبرنت | Helpernt - [ BBcode] : إضافة تأثير على الصورة الرمزية عند تمرير الماوس xenforo 2

هيلبرنت | Helpernt (https://www.helpernt.com/vb/index.php)

- ركن شروحات الزين فورو XENFORO (https://www.helpernt.com/vb/forumdisplay.php?f=94)

- - [ BBcode] : إضافة تأثير على الصورة الرمزية عند تمرير الماوس xenforo 2 (https://www.helpernt.com/vb/showthread.php?t=8191)

إضافة تأثير على الصورة الرمزية عند تمرير الماوس xenforo 2

سنقدم لك تأثيرًا رائعًا عند مرور الماوس على الصورة الرمزية. ما عليك سوى لصق كود css في قالب extra.less للستايل المراد التعديل عليه.

كود:

extra.less

كود:

/*avatar MAAIDNI MohammeD*/

.message-avatar-wrapper .avatar:before,

.message-avatar-wrapper .avatar:after{

    border-color: #00c5de;

}

.message-avatar-wrapper a:before,

.message-avatar-wrapper a:after{

    content: "";

    display: block;

    position: absolute;

    background: transparent;

    top: 0; bottom: 0; left: 0; right: 0;

    border-radius: 5%; /*Ne touchez pas ce paramètre si vous avez un avatar carré ou rectangulaire. Si vous avez un avatar, changez simplement le réglage sur "50%".*/

    transition: .3s all;

    border: 2px solid;

}

.message-avatar-wrapper a:hover:after{

   -webkit-transform: scale(1.5);

}

.message-avatar-wrapper a:hover:before{

    -webkit-transform: scale(2);

    transition: .3s all;

    opacity: 0;

}

/*avatar MAAIDNI MohammeD*/

المعاينة على النحو التالي:
https://i.imgur.com/OHSAHNr.gif

رد: إضافة تأثير على الصورة الرمزية عند تمرير الماوس xenforo 2

تم التطبيق أخي جزاك الله خيرا وبورك فيك

رد: إضافة تأثير على الصورة الرمزية عند تمرير الماوس xenforo 2

بارك الله فيكـ ..

رد: إضافة تأثير على الصورة الرمزية عند تمرير الماوس xenforo 2

يه=عطيك العافيه استمر اخى

شروحاتك ناريه