html - CSS 转换/转换不影响所需元素

Question

我只是想掌握高级过渡和变换，但在处理我正在处理的部分时遇到了一些麻烦。除了我不想更改/转换但我确实希望图像仍然转换的图像上有一个 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 放在 anchor 之外，但显然无法点击。我希望所有内容都可以点击，H5 保持原样，图像进行转换。

谢谢

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

Answer 1

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

.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