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

Question

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

1. 用户将鼠标悬停在 block 上；
2. 背景图像在 0.4 秒内缩放到 1.25；
3. 同时整个 block 被中间有文本的半透明灰色 block 覆盖。

问题如下:悬停时不仅图像增加，而且文本。我确实意识到可能所有后代都缩放到 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 和我所做的唯一调整背景图像大小的操作是将 上的 transform: scale(1.25); 更改为 background-size: 125%;。容器:悬停.image-block。您还需要将 .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>