0

我在我的网站上添加了 HTML 格式的图像叠加层以链接到社交媒体。除了移动设备上的一个小问题外，它在所有平台上看起来都不错——当点击图像时，叠加层会非常短暂地变成一个正方形，然后又恢复为圆形。附上示例...有人知道如何解决这个问题吗？

在此处输入图像描述

.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>

4

0 回答 0