请求编写带悬停旋转圆形图标的内容卡片HTML/CSS代码，解决图片超卡边问题

当然可以！我帮你实现了一个符合需求的内容卡片，包含你要的「图片超出卡片尺寸」以及「悬停旋转」效果，下面是完整的代码和细节说明：

HTML 结构 #

<div class="content-card">
  <div class="card-icon-wrapper">
    <img src="https://picsum.photos/200/200" alt="卡片图标" class="card-icon">
  </div>
  <div class="card-content">
    <h3 class="card-title">示例卡片标题</h3>
    <p class="card-description">这是卡片的描述文本，用来展示卡片的核心内容信息。可以根据需求调整长度和样式。</p>
    <button class="card-btn">查看详情</button>
  </div>
</div>

CSS 样式 #

/* 全局重置，可选 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Arial', sans-serif;
}

body {
  padding: 50px;
  display: flex;
  justify-content: center;
  background-color: #f5f5f5;
}

/* 卡片容器核心样式 */
.content-card {
  width: 320px;
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  padding: 40px 20px 20px;
  position: relative;
  /* 关键：允许内部元素超出卡片范围 */
  overflow: visible;
}

/* 图标容器：负责定位超出卡片的图片 */
.card-icon-wrapper {
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 100px;
  /* 裁剪成圆形 */
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid white;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* 卡片图标样式 */
.card-icon {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 悬停旋转动画 */
  transition: transform 0.6s ease;
}

/* 悬停旋转效果 */
.card-icon-wrapper:hover .card-icon {
  transform: rotate(360deg);
}

/* 卡片内容区域 */
.card-content {
  text-align: center;
}

.card-title {
  color: #2d3748;
  margin-bottom: 12px;
  font-size: 1.25rem;
}

.card-description {
  color: #718096;
  margin-bottom: 20px;
  line-height: 1.5;
  font-size: 0.9rem;
}

.card-btn {
  padding: 8px 24px;
  background-color: #4299e1;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background-color 0.3s ease;
}

.card-btn:hover {
  background-color: #2b6cb0;
}

关键要点说明 #

• 图片超出卡片：通过给卡片容器设置 overflow: visible，并将图标容器用绝对定位（position: absolute）放置在卡片外部（top: -50px），实现图片超出卡片的效果。同时给图标容器加白色边框，让它和卡片衔接更自然。
• 悬停旋转：利用 CSS transition 和 transform: rotate(360deg) 实现平滑的旋转动画，鼠标悬停在图标容器上时触发。
• 响应式适配：卡片宽度固定但可以根据需求调整，内部元素使用相对单位，方便后续扩展。

你可以直接复制这段代码到本地运行，替换图片地址和文本内容就能适配你的需求啦！

内容的提问来源于stack exchange，提问作者Raghav Gupta