如何实现默认小圆形显示、hover展开为完整区域的图片交互效果？

你想要的是图片默认只显示中心小圆形区域，鼠标悬停时展开成完整的方形区域。之前直接给img设置border-radius的方式不对——这样只是把200x200的图片本身变成圆形，而非只显示图片中心的小圆形部分。其实用border-radius配合容器就能实现需求，具体调整如下：

你的原始代码 #

<img class="zyra-thumb" src="thumbnail champion/thumb2.png" alt="zyra">

.zyra-thumb{
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 150px;
    transition: border-radius 0.3s;
}
.zyra-thumb:hover{
    border-radius: 10px;    
}

修正后的实现方案 #

核心思路是用容器限制显示区域：默认容器为圆形（只露出图片中心的圆形部分），悬停时容器变为圆角方形，露出完整图片。

<div class="thumb-container">
  <img class="zyra-thumb" src="thumbnail champion/thumb2.png" alt="zyra">
</div>

.thumb-container {
  width: 200px;
  height: 200px;
  overflow: hidden;
  border-radius: 50%; /* 默认圆形显示区域 */
  transition: border-radius 0.3s ease;
}

.zyra-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center; /* 确保图片中心内容始终在显示区域内 */
}

.thumb-container:hover {
  border-radius: 10px; /* 悬停时展开为圆角方形 */
}

原理说明 #

• 容器设置overflow:hidden后，仅显示其范围内的内容；默认border-radius:50%让容器变成圆形，因此图片只有中心的圆形部分能被看到，这就是你要的“小圆形”效果。
• 鼠标悬停时，容器的border-radius改为10px，显示区域变为圆角方形，图片的完整区域随之展示。
• object-position:center保证图片在容器形态变化时始终显示中心内容，避免偏移。

内容的提问来源于stack exchange，提问作者Alex Dan