title: How to get this hover effect with just CSS
body: <p><img src="https://i.stack.imgur.com/g5tEt.png" alt="enter image description here"></p>
  
  <p><img src="https://i.stack.imgur.com/10eYW.png" alt="enter image description here"></p>
  
  <p>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.</p>
  
  <p>Here's my code:</p>
  
  <p>HTML: </p>
  
  <pre><code>&lt;a class="cirlink" href="http://www.somesite.com"&gt;
  &lt;div class="circle"&gt;
  &lt;h2 class="textcolor"&gt;click&lt;br&gt; here&lt;/h2&gt;
  &lt;/div&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.circle
  {
  border-radius: 125px;
  width:250px;
  height:250px; 
  background-color:black;
  margin:auto;
  text-align:center;
  }
  
  .textcolor:hover
  {
    transition:1s;
    color:#FF4800;
  }
  </code></pre>
  
  <p>Also, is there any way to change the background image of a div on hover?</p>