Css 复制图像块悬停效果：附示例

以下是图像块悬停效果示例：

有人能告诉我正确的方向吗？什么是CSS

我想在我的图像块上复制这种悬停效果

谢谢你的帮助

---

Mike

当图像悬停时，您可以使用

transform

属性对其进行缩放，并向其添加

border

。下面是一个示例css代码，用您的类名替换它

.myimg{
过渡：全部。4s放松；
}
.myimg:悬停{
转换：比例（1.1）；
边框：5倍纯绿色；
盒影：2×2×10px#333；
}

---

你也可以稍微玩一下

方块阴影，以便在卡悬停或聚焦时产生更好的深度错觉。其他详情：


Flexbox
包装卡
使用
transform
/
scale
SVG
转换
关于
填充
属性
在卡未悬停或聚焦时添加透明边框，以防止悬停/聚焦期间文本移动和跳跃行为



.cards{
显示器：flex；
}
.卡片图像{
最大宽度：50px；
边缘底部：1米；
}
.card image.svg图标{
过渡：填充0.3s立方贝塞尔（.25、.8、.25、1）；
}
.card：悬停.card图像，
.卡片：焦点.卡片图像{
填充：#97cb6f；
}
.卡片{
字体系列：helvetica；
盒影：0 1px 3px rgba（0,0,0,0.12），0 1px 2px rgba（0,0,0,0.24）；
过渡：所有0.3立方贝塞尔（.25、.8、.25、1）；
背景：#fff；
边界半径：2px；
保证金：1rem；
位置：相对位置；
填充：1em；
边框：2倍实心透明；
}
.卡：悬停，
.卡片：焦点{
边框：2px实心#97cb6f；
变换：标度（1.05,1.05）；
盒影：0 14px 28px rgba（0,0,0,0.25），0 10px 10px rgba（0,0,0,0.22）；
}
.卡h2{
边际上限：0；
字体大小：120%；
}
.卡ul{
填充：0.1em；
}
李先生{
边缘底部：.5em；
}

一些头衔

伟大的
更大的
伟大的

一些头衔

伟大的
更大的
伟大的

工作正常。非常感谢您的时间。欢迎您，如果您得到了答案，您可以将本文中的任何答案标记为solved@MikeAllen它可能有理由提出自己的问题，但事实确实如此。我在卡的内容（不包括图像）周围添加了一个
div
，并且
scale
仅添加了新的
div
。