Skip to content

Instantly share code, notes, and snippets.

@bhargav2785
Created November 20, 2012 01:42
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save bhargav2785/4115406 to your computer and use it in GitHub Desktop.
Save bhargav2785/4115406 to your computer and use it in GitHub Desktop.
Round introduction badge *
/** Round introduction badge **/
.round-container{
background-image: url(///farm8.staticflickr.com/7032/6455698491_3b0cbcf7e3_s.jpg);
width: 200px;
height: 200px;
background-size: 100% 100%;
border-radius: 50%;
box-shadow: inset 0px 0px 1px 15px rgba(255,255,255,.5);
transition: all .5s ease;
}
.overlay{
position: absolute;
background: rgba(0,0,0, 0.7);
text-align: center;
font-family: 'Open Sans', Arial, sans-serif;
width: inherit;
height: inherit;
border-radius: 50%;
overflow: hidden;
color: white;
opacity: 0;
transition: all .5s ease-in-out;
transform: scale(0);
}
.round-container:hover{
box-shadow: inset 0px 0px 1px 1px rgba(255,255,255,.5);
}
.round-container:hover .overlay{
opacity: 1;
transform: scale(1);
}
.round-container:hover .overlay p{
opacity: 1;
transition: all .5s linear .5s;
}
.overlay h3{
margin-top: 50px;
text-shadow: 0 0 1px #FFF;
text-transform: uppercase;
letter-spacing: 2px;
}
.overlay p{
border-top: 1px solid #EEE;
padding: 10px;
margin: 30px 25px;
opacity: 0;
font-size: 10px;
color: rgba(255,255,255,.7);
}
<div class='round-container'>
<div class='overlay'>
<h3>Your Name</h3>
<p>A web developer and a sports lover</p>
</div>
</div>
{"view":"separate","fontsize":"60","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment