To enlarge the avatars smoothly on hover like what it does on this site, add the following custom CSS in css_additional template:
If you have our Last Visitors mod installed, then also add the below CSS to enlarge the avatars in the last visitors list.
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.
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 */
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 */
Comment