悬停上的 CSS 缩放图像、透明层和顶部的文本

Question

我在向 CSS 中的 HTML 块添加功能时遇到了一点问题。这是它应该如何工作的：

1. 用户悬停在区块上;
2. 背景图片在 0.4 秒内缩放到 1.25；
3. 同时整个块被半透明的灰色块覆盖，中间有文字。

问题如下：悬停时不仅图片增加，而且文字。我确实意识到可能所有后代都缩放到 1.25；然而，只有图像应该缩放，而文本在半透明层中间保持相同大小。请帮我解决。

HTML：

<div class="container">
    <div class="image-block">
        <div class="layer">
            <span>Whatever</span>
        </div>
    </div>
</div>

还有 CSS：

* {
margin: 0;
padding: 0;
border: 0;
font-family: sans-serif;
}
.container {
height: 20em;
width: 20em;
overflow: hidden;
}
.image-block {
height: 100%;
width: 100%;
background: url(http://a1.dspnimg.com/data/l/467928107631_M5V8zyVM_l.jpg) no-repeat center center;
background-size: cover;
transition: all 0.4s ease;
}
.layer {
height: 100%;
width: 100%;
background-color: rgba(0,0,0,0);
opacity: 0;
}
.image-block:hover .layer {
background-color: rgba(0,0,0,0.35);
opacity: 1;
}
.container:hover .image-block {
transform: scale(1.25);
}

还有 jsfiddle 链接：http://jsfiddle.net/vorontsov/kL8Lb8pm/10/

Answer 1

这里的文本居中。 Paulie_D 和我所做的唯一调整背景图像大小的操作是将.container:hover .image-block 上的transform: scale(1.25); 更改为background-size: 125%;。您还需要在.image-block 上将background-size: cover; 更改为background-size: 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;
    }

这是一个完整的工作示例：

        * {
            margin: 0;
            padding: 0;
            border: 0;
            font-family: sans-serif;
        }
        .container {
            display: table;
            height: 20em;
            width: 20em;
            overflow: hidden;
        }
        .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%;
            transition: all 0.4s ease;
        }
        .layer {
            height: 100%;
            width: 100%;
            background-color: rgba(0,0,0,0);
            opacity: 0;
            text-align: center;
            display: table;
        }
        .layer span {
            width: 100%;
            height: 100%;
            display: table-cell;
            vertical-align: middle;
        }
        .image-block:hover .layer {
            background-color: rgba(0,0,0,0.35);
            opacity: 1;
        }
        .container:hover .image-block {
            background-size: 125%;
        }

<div class="container">
    <div class="image-block">
        <div class="layer">
            <span>Whatever</span>
        </div>
    </div>
</div>