Skip to content

Instantly share code, notes, and snippets.

@daneden
Created January 24, 2012 13:40
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 5 You must be signed in to fork a gist
  • Save daneden/1670215 to your computer and use it in GitHub Desktop.
Save daneden/1670215 to your computer and use it in GitHub Desktop.
Path icon hover
/**
* 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;
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); }
}
<div class=user>
<i class=name>Daniel Eden</i>
<div class=avatar>
<img src=http://www.gravatar.com/avatar/ce22c94e6c291345223e0118bfdd8714?s=80>
</div>
</div>
{"view":"split-vertical","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment