HTML Image Overlay Link- Circle Turns To Square - html

Question

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?
.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"> <img src="https://cdn4.iconfinder.com/data/icons/social-media-icons-the-circle-set/48/linkedin_circle-512.png" height="48" width="48" /></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>