Path icon hover

dabblet.css

/**
 * Path icon hover
 *
 * Example of the desired effect (hover over the user avatar) https://path.com/p/5Eplz
 * 
 * Close, but annoying that the animation runs on page load. 
 * Possible solution could be to fade entire page content in while initial 
 * animation runs.
 */
 
 * {
 margin: 0;
 padding: 0;
 }

html {
	min-height: 100%;
	background: #444 url(http://cl.ly/DZd3/error-background.jpg) no-repeat center center;
	background-size: cover;

}

.user {
	position: absolute;animation-fill-mode: both;

	top: 50%;
	left: 50%;
	margin: -100px;
	width: 200px;
	height: 200px;
	text-align: center;
}

.user:hover i.name {
	animation: slideIn .6s ease;
	animation-fill-mode: both;

}

.avatar {
	position: relative;
	width: 80px;
	height: 80px;
	margin: 0 auto;
	border-radius: 100%;
	box-shadow:  0 1px 3px 2px rgba(0,0,0,.3);
	text-align: center;
}

.avatar::after {
	content: '';
	display: block;
	position: absolute;
	pointer-events: none;
	width: 100%;
	height: 100%;
	top: 0;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.4);
	border-radius: 100%;
}

i.name {
	display: inline-block;
	position: relative;
	font-style: normal;
	font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
	margin: 16px auto;
	background: rgba(0,0,0,.6) linear-gradient(rgba(255,255,255,0),rgba(255,255,255,.1) 50%, rgba(255,255,255,0) 50%);
	padding: .5em .75em;
	border-radius: 5px;
	color: #fff;
	font-weight: 700;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 0 0 1px rgba(0,0,0,.7);
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	animation: slideOut .6s ease;
	animation-fill-mode: both;
}

i.name::after {
	content: '';
	display: block;
	position: absolute;
	bottom: -6px;
	left: 50%;
	margin-left: -6px;
	width: 12px;
	height: 12px;
	background: rgba(0,0,0,.6);
	transform: rotate(-45deg);
	mask-image: linear-gradient(45deg, #000 50%, transparent 50%);
}

.avatar img {
	border-radius: 100%;
	display: block;
}

@keyframes slideOut {
	to { opacity: 0; transform: translateY(-20px); }
}

@keyframes slideIn {
	from { opacity: 0; transform: translateY(20px); }
	to { opacity: 1; transform: translateY(0); }
}

dabblet.html

<div class=user>
	<i class=name>Daniel Eden</i>
	<div class=avatar>
		<img src=http://www.gravatar.com/avatar/ce22c94e6c291345223e0118bfdd8714?s=80>
	</div>
</div>

settings.json

{"view":"split-vertical","prefixfree":"1","page":"css"}