CSS过渡/转换不影响所需的元素

Question

我只是想掌握高级过渡和变换，并且在我正在工作的部分遇到一点麻烦。我有一切按要求工作，除了我有一个h5的图像，我不想改变/变换，但我确实希望图像仍然变换。

我的小提琴比文字更能说明问题- 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

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

.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);
}

<<p> JSfiddle演示/strong>

Answer 2

将transform: scale(1)添加到.news-photo img时，应该没问题。它可以帮助浏览器理解在触发:hover状态时从哪里开始转换，在哪里结束转换。