Meet our Team layout with Hover Effects
This is an example of a meet our team layout with hover effects, designed using HTML, CSS, and Bootstrap framework 4. The profile images and font styles are imported to the code with their URLs. The form is given a height of 800px, and background color as #319ac6. The form title is displayed using a font color of #fff. The user profile cards are given a box-shadow style of 0 4px 0 #2b86a. The profile cards are given a wrap which appears on top of the user card, in a hover event. The wrap is given a transition value of all .3s ease. The user name on the wrap is displayed with a font-size of 24px, whereas the designation is displayed with a font-size of 14px, and font color of #555659. Each wrap is also given a set of social media icons with a width and height of 40px, and a box-shadow of 0 3px 0 rgba(0, 0, 0, .1). The icons are given background colors of #3262b9, #3dd7e5, #e23535, and #069, which turn to #2d57a5, #27d2e2, #de2020, and #005580 respectively, in a hover event. The user image turns its opacity to 0, on hover.