How to get this hover effect with just CSS

How to get this hover effect with just CSS



I've already got the circle part. I set a background color of black on the
div. and for the text, I set a:hover as the color shown. I just can't
figure out how do I set a:hover for the div as well just for that amount
of circumference.
Here's my code:
HTML:
<a class="cirlink" href="http://www.somesite.com">
<div class="circle">
<h2 class="textcolor">click<br> here</h2>
</div>
</a>
CSS:
.circle
{
border-radius: 125px;
width:250px;
height:250px;
background-color:black;
margin:auto;
text-align:center;
}
.textcolor:hover
{
transition:1s;
color:#FF4800;
}
Also, is there any way to change the background image of a div on hover?