当设置动画以增加大小时，背景不会 100% 扩展到框的左侧

Question

我试图让一个框扩大大小，同时让文本居中。我的问题是：当框展开时，我在框的标题部分使用的背景不会向左延伸 100%。

我认为这可能与以下代码有关，在 'hover mode' 中我将 -5px 设置为左​​边距和顶部边距，以便框从中间展开（这是因为宽度和高度展开10px):

.serviceBox1 {
        width:290px;
        height:282px;
        position:absolute;
        margin: 0px;
        overflow: hidden ;
        }

            .serviceBox1Hover {
                width:300px;
                height:292px;
                margin-left: -5px; 
                margin-top: -5px;
                }

有关其余代码和示例，请参见以下内容：

https://jsfiddle.net/L9oohws1/

N.b。解决方案必须确保文本在放大时保持在框的中间，如上面的 fiddle 所示。只需将宽度更改为 100% 即可使文本相对于框的中间向左移动（当它已展开时）。

Answer 1

        .serviceBox1Text {
            width:100%;
            margin: 0 auto;
        }

将宽度更改为 100%。这将导致它在悬停时完全向左延伸。

Answer 2

将 width:290px; 替换为 width:100%;。并删除 #textArea 和 #headingArea

的 width

Jsfiddle

.serviceBox1Text {
    width: 100%;
    margin: 0 auto;
}