← All elements
<div class="tm"><div class="av"><span class="soc"><i>in</i><i>X</i><i>@</i></span></div><b>Jonas Lindqvist</b><em>Frontend engineer</em></div>About this card
A profile card where the social row slides up from the bottom of the avatar on hover.
How it works
The avatar is built from two translucent shapes, a head circle and a shoulders half-circle, over a gradient. A dark social bar sits just below the image and translates up into view when the card is hovered.
Ways to customise it
- Replace the shapes with a photo.
- Add more icon circles.
- Change the green colours.
Good to know
On touch screens the bar stays hidden, so consider showing it by default on narrow viewports. Social links need accessible names in real use.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.