HTML Image Overlay Link- Circle Turns To Square

371 Views Asked by At

I've added an image overlay in HTML on my website to link to social media. It looks good on all platforms except for a small issue on mobile - when clicking on the image the overlay turns to a square very briefly before it reverts back to a circle. Example attached... Does anybody know how to fix this?

enter image description here

.circle {
  position: relative;
  width: 50%;
    margin: auto;
  border-radius: 50%;
  height: 200px;
  width: 200px;
  overflow: hidden;
  display: flex;
  justify-content: center;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #008CBA;
}

.circle:hover .overlay {
  opacity: 1;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}
  

  <div style="position:relative;">
    <div style="color:#ddd;background-color:#282E34;text-align:center;padding:50px 80px;text-align: justify;">
      <h2 style="color:#777;text-align:center;font-weight:bold">Meet The Founders</h2>
      <br>
      <h3 style="color:#777;text-align:center;">Andy Lee, Director of International Operations</h3>
      <br>
      <div class="circle"><img src="https://s.abcnews.com/images/Sports/WireAP_ace5eb7b9eca42d899e39c8756720d02_16x9_992.jpg" height="200" width="200" class="image" alt="Andy Lee, Director of International Operations" />
        <div class="overlay">
          <div class="text"> <a href="https://www.linkedin.com/in/ourandy/" title="Follow Andy Lee on Linkedin"><img src="https://cdn4.iconfinder.com/data/icons/social-media-icons-the-circle-set/48/linkedin_circle-512.png" height="48" width="48" /></a></div>
        </div>
      </div>
      <br>
      <p style="text-align:center;">Andy spent over a decade working in the UK IT sector before returning to his native Kuala Lumpur. He's worked as a trader and software developer for the Royal Bank of Scotland and Sky Betting and Gaming.</p>
      <br>
</div>

0

There are 0 best solutions below