css - css 中的文本适合元素问题

Question

我如何在 .inside-ob-u 中制作在悬停 .ob-nth2 后出现的文本，而不是如图所示进行“拟合过程”:

当高度和宽度发生变化时，可以清楚地看到文本是合适的。

如果绝对位置或禁用过渡，我该怎么做？如果我这样做效果很好。

https://jsfiddle.net/daf7a509/

Answer 1

您可以使用transform: scale(x)。好处是 scale 不会改变元素占用的空间 -> 其他 elements 不要移动。

https://jsfiddle.net/am7m384d/

编辑:

[...] but it also affects the content (childs) and mess things up. – user3734782

您可以将 .box__hover 的大小设置为悬停时应具有的大小，并在未悬停时将其scale 缩小(对于 transition )。然后 children 就会有正确的尺寸。

这是一个改编的 fiddle :https://jsfiddle.net/b7w40gtp/