Close

User profile with social icons animation

This is an example of a user profile with hover effects on the social media icons, designed using CSS, HTML, and Bootstrap framework 4. The concept of Lists has been used with UL and LI components. UL element has been used with the child elements of LI to display the social media icons in a single raw. The profile image is imported to the code with its URL. The profile card is given a width of 300px, height of 350px, and a cursor style as pointer to get the hand cursor effect on hover. The profile card is given an overlay filter, to be applied on a hover event, with an opacity of 1. The social media icons are given the styles of width and height as 25px, border as 1px solid #eee, padding as 20px, display as flex, justify-content as center, align-items as center, color as #fff, border-radius as 5px, and transition as all 1s. In a hover event, the icons take the styles of background as #fff, and font color as #000. Source:https://bbbootstrap.com/snippets/bootstrap-user-profile-social-icons-animation-11258499

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.