How to get this hover effect with just CSS

Question

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?

Answer 1

Do you need something like this?

Demo

A better looking demo

You can use a white border too

Demo with transitions

div {
    height: 100px;
    width: 100px;
    border-radius: 50%;
    border: 10px solid transparent;
    color: #fff;
    background: #515151;
}

div:hover {
    border: 10px solid #FF4800;
    color: #FF4800;
}

Am having a fixed width element with a transparent border, so that my element doesn't move on hover, you can also set the elements border to match the background color, and last but not the least, on hover, I simply change the border color to #FF4800 , I've also added transition example, if you want smoothness on hover .

---

Still if you don't want the elements background-color to span more 10px because of the transparent border, and you do not want to set the border-color to match the background color, you can use CSS content property like this

Demo ( content with :after pseudo)

div {
    height: 100px;
    width: 100px;
    border-radius: 50%;
    color: #fff;
    background: #515151;
    text-align: center;
    line-height: 100px;
    font-size: 20px;
    font-family: Arial;
    position: relative;
    margin: 30px;
}

div:hover:after {
    border: 10px solid #FF4800;
    color: #FF4800;
}

div:after {
    content: "";
    display: block;
    height: 100px;
    width: 100px;
    position: absolute;
    left: -10px;
    top: -10px;
    border: 10px solid transparent;
    border-radius: 50%;
}

Answer 2

Convert these two images into one single image and use CSS sprite technique by changing the background-position on hover. Thats it.

Answer 3

And as for the background change:

div {
background: url(image.png);
}

div:hover {
background: url(hoverimage.png);
}

Answer 4

You could Do it with border-radius

Demo http://jsfiddle.net/fYfwH/