Announcement

Collapse
No announcement yet.

Smooth Enlarge Avatar Effect on Hover

Collapse
X
Collapse
First Prev Next Last
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Free Mod Smooth Enlarge Avatar Effect on Hover

    To enlarge the avatars smoothly on hover like what it does on this site, add the following custom CSS in css_additional template:

    Code:
    /* Smooth Enlarge Avatar Effect on Hover - START */
    .l-desktop .b-avatar--thread > img,
    .l-desktop .avatar img,
    .l-desktop .b-avatar img,
    .l-desktop .b-avatar--s > img {
        transition: transform .2s ease;
    }
    
    /* Topic Avatars */
    .l-desktop .b-avatar--thread > img:hover {
        transform: scale(1.05);
    }
    
    /* Other Avatars */
    .l-desktop .avatar img:hover,
    .l-desktop .b-avatar img:hover,
    .l-desktop .b-post-sm:hover .avatar img,
    .l-desktop .topic-list-container .topic-list .topic-item:hover .avatar img,
    .l-desktop .js-memberlist-table-body .b-table__row:hover .b-avatar--s > img {
        transform: scale(1.15);
    }
    /* Smooth Enlarge Avatar Effect on Hover - END */
    If you have our Last Visitors mod installed, then also add the below CSS to enlarge the avatars in the last visitors list.

    Code:
    /* Smooth Enlarge Last Visitors Avatar Effect on Hover - START */
    .l-desktop .vbmodsthatrocks-last-visitors-widget .avatar img:hover {
        transform: scale(1.5);
    }
    
    .l-desktop .vbmodsthatrocks-last-visitors-widget .display-avatar .b-avatar-username {
       top: 0;
    }
    
    .l-desktop .vbmodsthatrocks-last-visitors-widget .avatar img:hover + .b-avatar-username {
        position: relative;
        top: 20px;
        transition: top .2s ease;
        background: #fff;
        box-shadow: 0 5px 6px rgba(0,0,0,.10),0 -3px 12px rgba(0,0,0,.2);
        border-radius: 4px
    }
    /* Smooth Enlarge Last Visitors Avatar Effect on Hover - END */
    Adjust the scale values according to your liking. Scale value of 1.0 means it's 100% the same size, so you'll want to set it to 1.1 or higher to make the avatar bigger.
    Helpful? Donate. Thanks!
    Buy me a coffeePayPal QR Code
    Fast VPS Host for vBulletin:
    A2 Hosting & IONOS

    #2
    I really thank you for the support and help and attention if I were close to you I would kiss you continue like this
    I Love You Kiss GIF by Omaze

    Comment


    • Mitch
      Mitch commented
      Editing a comment
      Don't kiss him, just donate

Users Viewing This Page

Collapse

There is 1 user viewing this forum topic.

  • Guest Guest

Latest Posts

Collapse

Working...
X
Searching...Please wait.
An unexpected error was returned: 'Your submission could not be processed because you have logged in since the previous page was loaded.

Please push the back button and reload the previous window.'
An unexpected error was returned: 'Your submission could not be processed because the token has expired.

Please push the back button and reload the previous window.'
An internal error has occurred and the module cannot be displayed.
There are no results that meet this criteria.
Search Result for "|||"