JSFiddle - React, Tailwind, and code Playground

by timmah

HTML

<div id="wrap">
    <div class="gradient">
        &nbsp;
    </div>

</div>

CSS

#wrap {
    position: relative;
	width: 120px;
	margin: 5em auto 0 auto;
}

:before,
:after {
    box-sizing: border-box;
}

.gradient:before {
    width: 120px;
    height: 120px;
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: -60px;
    background: orange;
    border: 2px solid black;
	-webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

.gradient:after {
    background: url(http://maps.finance.gov.au/sites/all/themes/maps_theme/images/icon-dof-cycle.png) no-repeat;
	background-position: 0 0;
    content: "";
    position: absolute;
    width: 40px;
    height: 40px;
	background-color: orange;
	margin-left: -25px;
    margin-top: -25px;
    top: 50%;
    left: 50%;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
	
	/* webkit-mask-image: linear-gradient(rgba(0, 0, 0, 1.0), transparent); */
}

.gradient {
	height: 120px;
    position: relative linear-gradient(rgba(255, 255, 255, 1), transparent);
}
.gradient:hover {
	cursor: pointer;
}
.gradient:hover:after {
	background-position: 0 -40px;
	// background-image: -webkit-gradient(linear, 0 top, 0 bottom, from(black), to(white));
	background-image: -webkit-gradient(linear, 0 top, 0 bottom, from(black), to(transparent));
}