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

JSfiddle Demo

Answer 2

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

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

2 个答案: