CSS缩放悬停图像，透明层和顶部文本

我在CSS中向HTML块添加特性时遇到了一个小问题。以下是它的工作原理：

用户将鼠标悬停在块上； 背景图像在0.4秒内缩放到1.25； 同时，整个块覆盖中间半透明的灰色文本块。 问题如下：悬停不仅会增加图像，还会增加文本。我确实意识到，可能所有的下降率都是1.25；然而，只有图像应该缩放，而文本保持相同的大小在中间的半透明层。请帮我解决这个问题

HTML:

---

还有jsiddle链接：

这里是以文本为中心的链接。Paulie_D和我所做的只是改变背景图像的大小：缩放1.25；背景尺寸：125%；on.container:hover.image块。您还需要更改背景大小：封面；背景尺寸：100%；打开。图像块

例如：

   .image-block {
        height: 100%;
        width: 100%;
        background: url(http://a1.dspnimg.com/data/l/467928107631_M5V8zyVM_l.jpg) no-repeat center center;
        background-size: 100%; /* This line was changed */
        transition: all 0.4s ease;
    }

    .container:hover .image-block {
        background-size: 125%; /* This line was changed */
    }

要垂直和水平居中对齐需要添加的文本，请执行以下操作：

    .layer {
        height: 100%;
        width: 100%;
        background-color: rgba(0,0,0,0);
        opacity: 0;
        text-align: center;
        display: table; /* this line was added */
    }

    /* This whole block was added */
    .layer span {
        width: 100%;
        height: 100%;
        display: table-cell;
        vertical-align: middle;
    }

下面是一个完整的工作示例：

* { 保证金：0； 填充：0； 边界：0； 字体系列：无衬线； } .集装箱{ 显示：表格； 高度：20em； 宽度：20em； 溢出：隐藏； } .图像块{ 身高：100%； 宽度：100%； 背景：urlhttp://a1.dspnimg.com/data/l/467928107631_M5V8zyVM_l.jpg 无重复中心； 背景大小：100%； 过渡：所有0.4s缓解； } .层{ 身高：100%； 宽度：100%； 背景色：rgba0,0,0,0； 不透明度：0； 文本对齐：居中； 显示：表格； } .层跨度{ 宽度：100%； 身高：100%； 显示：表格单元格； 垂直对齐：中间对齐； } .图像块：悬停.layer{ 背景色：rgba0,0,0,0.35； 不透明度：1； } .container:hover.image块{ 背景大小：125%； } 无论什么

---

@保利，你是魔术师还是什么的？非常感谢你能解释一下吗？这比我要求的还要多。非常感谢你！当我要求详细说明一下时，我只是想解释一下为什么缩放不起作用，以及背景大小这样的常见问题。不管怎样，谢谢。

   .image-block {
        height: 100%;
        width: 100%;
        background: url(http://a1.dspnimg.com/data/l/467928107631_M5V8zyVM_l.jpg) no-repeat center center;
        background-size: 100%; /* This line was changed */
        transition: all 0.4s ease;
    }

    .container:hover .image-block {
        background-size: 125%; /* This line was changed */
    }

    .layer {
        height: 100%;
        width: 100%;
        background-color: rgba(0,0,0,0);
        opacity: 0;
        text-align: center;
        display: table; /* this line was added */
    }

    /* This whole block was added */
    .layer span {
        width: 100%;
        height: 100%;
        display: table-cell;
        vertical-align: middle;
    }