Speech bubble

dabblet.css

/*
	Speech bubble
*/

body {
   padding: 100px;
}

#speech_bubble {
	background:#34c8f5;
	color:#fff;
	display:inline-block;
	padding:.5em 1em .5em 2em;
	border-radius:20px;
	position:absolute;
	top:-30px;
	right:-150px;
	width:200px;
	opacity:.01;
	z-index:0;
}

	figure:hover #speech_bubble {
		top:-50px;
		right:-190px;
		opacity:1;
		transition-duration:.5s;
	}

	#speech_bubble:after {
		z-index:0;
		content:"";
		display:block;
		position:absolute;
		background:#34c8f5;
		width:20px;
		height:20px;
		bottom:-8px;;
		left:15px;
		transform:rotate(50deg);
		border-radius:3px;
	}
	
	figure {
		position:relative;
		background:#fff;
		box-shadow:0 0 1px #222;
		display:inline-block;
		padding:.3em .3em .1em .3em;
		border-radius:5px;
	}
	
	figure img {
		border-radius:5px;
	}	
	

dabblet.html

<figure>
	<div	id="speech_bubble">
		I'mma gonna say something witty
	</div>
	<img src="https://twimg0-a.akamaihd.net/profile_images/847251684/r001-020__2__reasonably_small.jpg">
</figure>

settings.json

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