User profile with hover effect
This is another example of a user profile layout with hover effects, designed using HTML, CSS, and Bootstrap framework 4. The profile images are imported to the code with their URLs. The body of the form is given a background color as #000. The form consists of three panels with user details. The panel heading section is given a transition value of height 600ms ease-in-out. The user image in the panel is given a transform effect of translate3d(-50%, -50%, 0). The panel body section is given the styles of height and width as 70px, background-color as #fff, border-radius as 50%,opacity as 1, box-shadow as 0 0 0 3px #fff, transform as translate3d(-50%, -50%, 0), and transition as opacity 400ms ease-in-out. In a hover event, the panel heading changes the height to height: 55, and takes a transition value of height 400ms ease-in-out, whereas the panel body changes the opacity to 0, and takes a transition value of opacity 400ms ease-in-out.