title: arrow hover adding a circle div behind
body: <p>I have two arrow images (previous / next) with the code here like this:</p>
  <pre><code>.fp-controlArrow {
      position: absolute;
      width: 32px; /* This can be added here so you don't have to set a width and height 2 times for each arrow, this will create one width for both arrows */
      height: 32px; /* This does the same as above */
      margin-top:-15px; /* This value must always be half of the height - This does the same as above */
      z-index: 30;
      top: 50%;
      cursor: pointer;
  }
  
  .fp-controlArrow.fp-prev {
      left:0;
      background: url(https://uploads-ssl.webflow.com/602dbecd2160ce28b5bc428b/602e923133f8dc0bf994fc49_left-arrow.svg) no-repeat;
  }
  .fp-controlArrow.fp-next {
      right:0;
      background: url(https://uploads-ssl.webflow.com/602dbecd2160ce28b5bc428b/602e9231ec03b6c9682b540c_right-arrow.svg) no-repeat;
  </code></pre>
  <p>I would like when I hover over an arrow it a round transparent circle appeared behind the arrow like on this example:</p>
  <p><a href="https://i.stack.imgur.com/CpL2t.gif" rel="nofollow noreferrer">enter image description here</a></p>
  <p>how can I achieve this?</p>
  <p>thank you!</p>