CSS transitions/transforms 不影响必需的元素

Question

我只是想掌握高级过渡和变换，但在处理我正在处理的部分时遇到了一些麻烦。我的一切都按要求工作，除了我不想 change/transform 在图像上有一个 h5，但我确实希望图像仍然变换。

我的 fiddle 应该说明比文字更好 - http://jsfiddle.net/28m3fpcv/2

和代码

.news-container {
    background: #2a2a2a;
    width: 90%;
    margin: 30px 5%;
}

.news-photo {
    float: left;
    width: 33.333333333%;
    position: relative;
    max-height: 200px;
    overflow: hidden;
}

.news-photo img {
    opacity: 0.5;
    max-width: 100%;
    display: block;
    transition: all 1s ease;
}

.news-photo img:hover {
    -webkit-transform:scale(1.25); /* Safari and Chrome */
    -moz-transform:scale(1.25); /* Firefox */
    -ms-transform:scale(1.25); /* IE 9 */
    -o-transform:scale(1.25); /* Opera */
     transform:scale(1.25);
}

.news-photo a {
    display: block;
    transition: all 1s ease;
}

.news-photo h5 {
    position: absolute;
    top: 50%;
    width: 100%;
    text-align: center;
    margin: 0;
    z-index: 20;
    font-size: 1.063em;
    font-weight: 400;
    color: #f1f1f1;
}

HTML:

<div class="news-container cf">

            <article class="news-photo">
                <a href="#">
                    <img src="http://placehold.it/1024x576"/>
                    <h5>Story Title</h5>
                </a>
            </article>

            <article class="news-photo">
                <a href="#">
                    <img src="http://placehold.it/1024x576"/>
                    <h5>Story Title</h5>
                </a>
            </article>

            <article class="news-photo">
                <a href="#">
                    <img src="http://placehold.it/1024x576"/>
                    <h5>Story Title</h5>
                </a>
            </article>

            <article class="news-photo">
                <a href="#">
                    <img src="http://placehold.it/1024x576"/>
                    <h5>Story Title</h5>
                </a>
            </article>

            <article class="news-photo">
                <a href="#">
                    <img src="http://placehold.it/1024x576"/>
                    <h5>Story Title</h5>
                </a>
            </article>

            <article class="news-photo">
                <a href="#">
                    <img src="http://placehold.it/1024x576"/>
                    <h5>Story Title</h5>
                </a>
            </article>
        </div>

如果将鼠标悬停在文本上，图像转换将还原。有什么办法可以避免这种情况发生，但仍然保留标题？我尝试将 H5 放在锚点之外，但显然无法点击。我希望所有内容都可以点击，H5 保持原样，图像进行转换。

谢谢

编辑：抱歉，我应该进一步澄清。图像悬停确实工作正常，问题是当您的鼠标到达文本时，缩放重置，反之亦然。我想要实现的效果是，当您将鼠标悬停在框中的任何位置（包括文本）时，图像缩放仍然存在，但我不希望文本具有缩放效果，它应该保持原始大小。

Answer 1

将 transform: scale(1) 添加到 .news-photo img 时应该没问题。它有助于浏览器了解在触发 :hover 状态时从何处开始转换以及从何处结束转换。

Answer 2

是的，我想你可以，但你必须改变这个

.news-photo img:hover {
    -webkit-transform:scale(1.25); /* Safari and Chrome */
    -moz-transform:scale(1.25); /* Firefox */
    -ms-transform:scale(1.25); /* IE 9 */
    -o-transform:scale(1.25); /* Opera */
     transform:scale(1.25);
}

至此

.news-photo a:hover img {
    -webkit-transform:scale(1.25); /* Safari and Chrome */
    -moz-transform:scale(1.25); /* Firefox */
    -ms-transform:scale(1.25); /* IE 9 */
    -o-transform:scale(1.25); /* Opera */
     transform:scale(1.25);
}

JSfiddle Demo

CSS transitions/transforms 不影响必需的元素

CSS transitions/transforms not affecting required elements

html

css

css-transitions

css-transforms