Round introduction badge *

dabblet.css

/** 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);
}

dabblet.html

<div class='round-container'>
	<div class='overlay'>
		<h3>Your Name</h3>
		<p>A web developer and a sports lover</p>
	</div>	
</div>

settings.json

{"view":"separate","fontsize":"60","seethrough":"","prefixfree":"1","page":"all"}