Simple yet sexy hovercard with minimum CSS
Update: This hovercard is now available as a plugin too!
So you’ve seen and loved Twitter’s and Facebook’s hovercard, now its time to make one for your website! A hovercard is a way to show related information in card format when you hover over some username, text or a link.
So you have a user and his bio that you want to display using hovercard. To add a further slickness to our design, instead of showing a new card we’ll just make the name fade into a detailed card (in place). The only trick with this approach is positioning:
- Preview card - (position:relative):
- Name - (position: relative, z-index: higher than details)
- Details - (position: absolute)
Details are initially hidden and displayed (or loaded via ajax) on hover. The absolute positioned details will now fade in to a card with enough top padding i.e. 2em to overlay the name (with higher z-index) in card itself. You may either use jQuery to add fadein effect or straight forward CSS to toggle display.
<label class="name">Prashant Chaudhary</label>
<img src="http://30.media.tumblr.com/avatar_d3eadb3e29f8_128.png" alt="PC"/>
Web developer. Loves UI/UX.<br/>
z-index:100; /*greater than details, to still appear in card*/
border:solid 1px #ddd;
z-index:50; /*less than name*/
padding:2em 10px 10px; /*leave enough padding on top for the name*/
Hover on the name in this jsFiddle to view a live demo.
Some ways you can use hovercard to delight your users:
- Show Person bio, book author and price, etc.
- Offer a link preview before navigating.
- Edit in place options.
- Load related information with Ajax.
- Use it for ‘word-meanings’ and what not!