Forked from Yun Liu's Pen zGjGYx.
A Pen by Michael Corrado on CodePen.
<!-- this is the markup. you can change the details (your own name, your own avatar etc.) but don’t change the basic structure! --> | |
<aside class="profile-card"> | |
<header> | |
<!-- here’s the avatar --> | |
<a href="http://tutsplus.com"> | |
<img src="http://s3-us-west-2.amazonaws.com/s.cdpn.io/296158/profile/profile-512_1.jpg"> | |
</a> | |
<!-- the username --> | |
<h1>YUN LIU</h1> | |
<!-- and role or location --> | |
<h2>Web Developer</h2> | |
</header> | |
<!-- bit of a bio; who are you? --> | |
<div class="profile-bio"> | |
<p> I'm a novice web developer. I love programming, especially web development. And I always have a passion for learning new knowledge and skills. </p> | |
</div> | |
<!-- some social links to show off --> | |
<ul class="profile-social-links"> | |
<!-- twitter - el clásico --> | |
<li> | |
<a href="http://twitter.com/tutsplus"> | |
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/social-twitter.svg"> | |
</a> | |
</li> | |
<!-- envato – use this one to link to your marketplace profile --> | |
<li> | |
<a href="http://envato.com"> | |
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/social-envato.svg"> | |
</a> | |
</li> | |
<!-- codepen - your codepen profile--> | |
<li> | |
<a href="http://codepen.io/njuliuyun/"> | |
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/social-codepen.svg"> | |
</a> | |
</li> | |
<!-- add or remove social profiles as you see fit --> | |
</ul> | |
</aside> | |
<!-- that’s all folks! --> |
html, body { | |
width: 100%; | |
height: 100%; | |
background: #f5f5f5; | |
margin: 0; | |
padding: 0; | |
font-family:Arial, sans-serif; | |
} | |
.profile-card { | |
position: absolute; | |
width: 340px; | |
height: 310px; | |
left: 0; | |
right: 0; | |
margin: 0 auto; | |
background: transparent; | |
text-align: center; | |
transition-duration: .5s; | |
} | |
.profile-card:after, .profile-card:before { | |
position: absolute; | |
content: ""; | |
width: 0; | |
height: 0; | |
border-style: solid; | |
border-width: 80px 170px; | |
border-color: transparent #6DCDEE #99DCF3 #99DCF3; | |
transition-duration: 0.5s; | |
} | |
.profile-card:after { | |
left: 0px; | |
top: 150px; | |
border-radius: 5px; | |
box-shadow: 3px 3px 10px #336699; | |
} | |
.profile-card:before { | |
border-width: 80px 170px; | |
border-color: transparent transparent #56C5EA transparent; | |
box-shadow: 0 150px #56C5EA; | |
left: 0px; | |
top: -10px; | |
} | |
.profile-card:hover:after{ | |
top: 350px; | |
} | |
.profile-card:hover:before{ | |
top: 190px; | |
} | |
header { | |
position: absolute; | |
width: 310px; | |
height: 150px; | |
left: 0; | |
right: 0; | |
margin: 0 auto; | |
top: 130px; | |
transition-duration: .5s; | |
} | |
header img{ | |
display: block; | |
position: absolute; | |
display: block; | |
width: 140px; | |
height: 140px; | |
border-radius: 50%; | |
border: 3px solid #fff; | |
box-shadow: 2px 2px 3px rgba(10, 10, 30, 0.6); | |
overflow: hidden; | |
left: 0; | |
right: 0; | |
margin:auto; | |
z-index: 3; | |
transition-duration: .5s; | |
} | |
header h1, header h2 { | |
position: absolute; | |
color: #545454; | |
font-size: 1.5em; | |
top: -30px; | |
left: 25px; | |
z-index: 2; | |
transition-duration: .5s; | |
} | |
header h2 { | |
font-size: .8em; | |
left: 200px; | |
top: -10px; | |
} | |
.profile-card:hover > header{ | |
top: 150px; | |
} | |
.profile-card:hover > header img { | |
width: 100px; | |
height: 100px; | |
left: -150px; | |
top: -80px; | |
transform: rotate(360deg); | |
} | |
.profile-card:hover > header h1{ | |
left: 150px; | |
top: -70px; | |
} | |
.profile-card:hover > header h2{ | |
left: 180px; | |
top: -5px; | |
color: #999999; | |
} | |
.profile-bio { | |
position: absolute; | |
width: 310px; | |
height: 150px; | |
background: rgba(255, 255, 255, 0.5); | |
color: transparent; | |
letter-spacing: .1em; | |
border-radius: 5px; | |
box-shadow: 2px 3px 5px rgba(10, 10, 30, 0.5); | |
top: 100px; | |
left: 0; | |
right: 0; | |
margin: auto; | |
transition-duration: 0.5s; | |
} | |
.profile-bio:after { | |
position: absolute; | |
content: ""; | |
width: 100%; | |
height: 20px; | |
background: rgba(0,102, 153,0.5); | |
left: 0; | |
right: 0; | |
margin: auto; | |
top: 80px; | |
} | |
.profile-card:hover >.profile-bio { | |
top: 50px; | |
height: 400px; | |
color: white; | |
} | |
.profile-card:hover > .profile-bio p{ | |
position: absolute; | |
padding: 30px 20px 70px 20px; | |
top: 150px; | |
font-size: 1.0em; | |
line-height: 1.4em; | |
background: rgba(0,102, 153,0.6); | |
transition-duration: .5s; | |
} | |
.profile-social-links { | |
position: absolute; | |
top: 0px; | |
opacity:0; | |
} | |
.profile-card:hover > .profile-social-links { | |
opacity: 1; | |
top: 350px; | |
transition-delay: 0.5s; | |
} | |
.profile-social-links li{ | |
position: absolute; | |
width: 32px; | |
height:32px; | |
padding: 2px; | |
border-radius: 100%; | |
background: transparent; | |
border: 2px solid #fff; | |
box-shadow: 1px 1px 3px rgba(10, 10, 30, 0.8); | |
display: inline-block; | |
z-index: 4; | |
} | |
.profile-social-links li img{ | |
width: 28px; | |
margin-top:2px; | |
filter: brightness(0) invert(100%); | |
-webkit-filter: brightness(0) invert(100%); | |
} | |
.profile-social-links li:first-child { | |
top: 50px; | |
left: 50px; | |
} | |
.profile-social-links li:first-child:hover { | |
top: 47px; | |
box-shadow: 3px 3px 3px rgba(30, 10, 10, 0.8); | |
} | |
.profile-social-links li:nth-child(2) { | |
top: 80px; | |
left: 150px; | |
} | |
.profile-social-links li:nth-child(2):hover { | |
top: 77px; | |
box-shadow: 3px 3px 3px rgba(30, 10, 10, 0.8); | |
} | |
.profile-social-links li:last-child { | |
top: 50px; | |
left: 250px; | |
} | |
.profile-social-links li:last-child:hover { | |
top: 47px; | |
box-shadow: 3px 3px 3px rgba(30, 10, 10, 0.8); | |
} |