卡片悬浮效果需用div容器包裹img，通过border-radius+overflow:hidden实现圆角，transition控制transform位移和box-shadow变化，hover时translateY(-4px)上浮并增强阴影，避免直接给img设border-radius或用margin上浮。

给图片加卡片式悬浮效果，核心是用 CSS 实现「悬停时有阴影、微抬升、圆角、过渡动画」的组合效果。不需要 JS，纯 HTML + CSS 就能完成。

基础结构：用容器包裹图片

直接对 <img alt="HTML怎么给图片加类似卡片的悬浮效果代码" > 标签加效果容易受限（比如无法加阴影外扩或伪元素），推荐用一个 <div> 作为卡片容器： <font color="#666"> <pre class="brush:php;toolbar:false;">&lt;div class=&quot;card&quot;&gt;&lt;br&gt; &lt;img src=&quot;example.jpg&quot; alt=&quot;示例图&quot;&gt;&lt;br&gt;&lt;/div&gt;</pre> </font> <h3>关键 CSS：卡片悬浮样式</h3> <p>以下是一段简洁实用的代码，支持平滑过渡、阴影、上浮和圆角：</p> <font color="#666"> <pre class="brush:php;toolbar:false;">.card {&lt;br&gt; display: inline-block;&lt;br&gt; border-radius: 8px;&lt;br&gt; overflow: hidden;&lt;br&gt; box-shadow: 0 2px 6px rgba(0,0,0,0.1);&lt;br&gt; transition: all 0.3s ease;&lt;br&gt;}&lt;br&gt;&lt;br&gt;.card:hover {&lt;br&gt; transform: translateY(-4px);&lt;br&gt; box-shadow: 0 6px 16px rgba(0,0,0,0.15);&lt;br&gt;}&lt;br&gt;&lt;br&gt;.card img {&lt;br&gt; display: block;&lt;br&gt; width: 100%;&lt;br&gt; height: auto;&lt;br&gt;}</pre> </font> <ul> <li> <strong>border-radius</strong> 给卡片圆角，配合 <code>overflow: hidden 让图片也圆角

transition 控制所有变化（位移+阴影）在 0.3 秒内缓动，避免生硬

transform: translateY(-4px) 是“上浮”关键，比用 margin-top 更性能友好

box-shadow 悬停时加深加远，增强立体感

进阶小技巧（可选）

让效果更精致，可以加这些细节：

立即学习“前端免费学习笔记（深入）”；

• 鼠标悬停时图片轻微缩放：.card:hover img { transform: scale(1.02); }
• 加一层半透明白色遮罩（适合配文字）：.card::before 伪元素 + opacity: 0 / hover:opacity:0.1
• 响应式适配：在小屏下减小上浮距离和阴影强度，提升移动端体验

注意事项

避免常见坑：

• 别给 img 直接设 border-radius —— 它只裁剪边框，不裁剪阴影；必须用父容器控制
• 慎用 margin 实现上浮，会导致页面重排；transform 不触发重排，更流畅
• 阴影颜色建议用 rgba(0,0,0,0.1) 而非纯黑，更自然