Close

Avatars Main page with Animations

This is an example of a web layout with movable profile avatars and hover effects, designed using CSS, HTML, JavaScript, and Bootstrap framework 4. The avatars are given an animation to move along with the mouse cursor movement, on hover. The profile images are imported to the code with their URLs. JavaScript methods have been used to implement the movable animation and the resize effect on the avatars. The body of the form is given a background color as #08202B. The navbar is given a style set of font-family as 'GTAmericaExpanded', sans-serif, font-size as 2.4rem, font color as #fff, font-weight as 900, text-transform as uppercase to automatically convert the text to uppercase, cursor style as pointer to get the hand cursor effect on hover, and line-height as 1.2em. The avatar name is given the styles of font-size as 1.2rem, font color as #fff, font-weight as 800, and transform as translateY(-50%). The name changes its font-size to 1.7rem, on hover. The avatar photo container is given a width and a height of 50%, and 60% respectively, which gets changed to 65% and 75% in a hover event. Source: https://mdbootstrap.com/snippets/jquery/tomekmakowski/854141#js-tab-view

Post Comment or Questions

Lorem ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Several Related Snippets

Lorem ut labore et dolore magna aliqua. Ut enim ad minim veniam.