Animated Profile Popover

Published on
Tags
Popover, Tooltip, CSS3 Transitions, Navigation, Menu
No. of comments
20 comments
Browser compatibility
Firefox 4, Safari 4, Chrome 13, Opera 10, IE 7
License
MIT License
Animated Profile Popover CSS Code Snippet

An animated profile popover / context menu with a nice show/hide transition.

Both height and opacity are animated on hover using CSS3 transitions.

Original PSD by Matthew Skiles.

Download all snippets + a bonus
in one easy .zip

20 comments

Rui said
Ef7b3c87850607bb5514fca2731962fb

Perfect, love your work, bookmarked ;)

Thibaut said
B6374f07090c513a73b875e0c5fe5924

Thanks :)

madalin said
845c0a4fa43b447844ffbe5517ca2e4c

Nice one! Thanks!

Source Canvas said
7fdf5c562a491f01a006ccc481ed0443

Wow this is so fantastic thank you. The demo looks simply amazing.

Andrew said
6d6d11c396a674d14c15d4a64f62368c

Is there a good way to implement for mobile devices? Slick demo.

Thibaut said
B6374f07090c513a73b875e0c5fe5924

Hi Andrew
I think the easiest way to make this work on mobile would be to show/hide the popover on click/touchstart using JavaScript.

Anubis said
7a6db98378fce90bde5bb5b39d252686

good demo, iPad not function :-/

naser abbasi said
Fa85d4948bb960a174cd0692b9b06475

tanks very beuty

Jin said
73ed3d10675138fa04932d7f256a43aa

Thanks~

Geoff said
53e22a6244306f8594046b9046b29b23

This is very cool, but I'm struggling trying to get the pointer to the top. I mean, I was able to move the pointer to the top of the bubble but it still points downward. I don't understand how the pointer is created without an image so I'm not sure how to rotate it so the pointer is on top and pointing up. Any ideas? Thanks!

Thibaut said
B6374f07090c513a73b875e0c5fe5924

Hi Geoff
You need to replace "border-top" with "border-bottom" on the before/after pseudo elements to make the arrow point upward.
The arrows are created using a technique showcased here:
http://cssarrowplease.com/

Geoff said
53e22a6244306f8594046b9046b29b23

Awesome, thanks!

Mustafa said
A74419fa7ae1096cd6928ea4d3d4456f

Great stuff thanks!!

Eric said
8196ceabab4ab51faa242aa45b841ea8

This looks great!! Is there a way that I could have an anchor in an image and have the popover cover the entire image when the anchor is clicked?

Youssefusf said
87c043bcc95a86c9aa316959c976b443

I Love it thats exactly what im looking for

thank you man
ur awesome <3

chnadan kumar said
B71518ffb1f7b850e03301d8e49d7f39

thanks

ctr said
63b8362c89aa58c535b90ca8a324f182

I like helping too. I disabled adblock and clicked some advertisements to help you. Have a nice day

Khan Ghaloo said
D98d7bacb3189a25930be21621acc3ac

I want to use it on blogger...
How I can do thatis ?????

karan menon said
58c955755fb3cebee73fc9ec974c537f

Very Nice tutorial :)

Dean said
5c0829f04cbeba179d964409b05f8456

Looks great! What is the html to implement it?

Leave a comment