Pure CSS image speech bubble

CSS circle with background image, and speech bubble tool tip piece.

by Jon Fuller

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div class="bubble"></div>

CSS

body{
	background: red;
}
.bubble {
	background-image: url(http://images5.fanpop.com/image/photos/30800000/-Random-random-30843841-1920-1080.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	background-color: white;
	width: 100%;
	max-width: 200px;
	border-radius: 50%;
	margin: 0 auto;
	border: 8px solid blue;
	position: relative;
}
.bubble::before {
	content: "";
	position: absolute;
	bottom: -12px;
	right: -12px;
	width: 0;
	height: 0;
	border-top: 50px solid transparent;
	border-bottom: 50px solid transparent;
	border-left:100px solid blue; 
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	z-index: -1;
}
.bubble::after {
	content: "";
	position: absolute;
	bottom: -14%;
	left: 0;
	right: 0;
	height: 40px;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0.65+0,0+66 */
	background: -moz-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 66%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
	background: -webkit-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 66%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
	background: radial-gradient(ellipse at center,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 66%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	z-index:-2;
}

JavaScript

jQuery( document ).ready(function() {
	jQuery('.bubble').height(jQuery('.bubble').width());
});
jQuery(window).resize(function() {
	jQuery('.bubble').height(jQuery('.bubble').width());
});