时间戳

首页 > 解决方案 > 悬停时图像不缩放

html - 悬停时图像不缩放

问题描述

各位专家下午好

我在悬停时缩放图像时遇到问题。我检查了其他线程，似乎没有什么对我有用。从我从其他线程中了解到的是，图像缩放不适用于内联元素。因此，我尝试display:inline-block将 .banner-left-img 类和 .left 类包括在内。然而，这对我来说并不奏效。

我尝试过使用对比度、过滤器等进行变换。没问题，但缩放它就成了问题。

我不明白什么？

.banner .left {
    flex: 1;
    height: 100%;
    padding-right: 10%;
    background: var(--primary2-color);
    z-index: 2;
}

.banner .left .banner-left-img {
    position: relative;
    top: 50%;
    left: -150%;
    transform: translateY(-50%);
    width: 145%;
    animation: 0.75s ease-in forwards imgSlideFromLeft;
}

@keyframes imgSlideFromLeft {
    100% {
        top: 50%;
        left: 7%;
        transform: translateY(-50%);
    }
}

.banner-left-img:hover {
    transform: scale(1.5);
}
<section class="banner">
    <div class="left">
        <img class ="banner-left-img" src="/img/banner/banner.png" alt="Mercedes AMG GT R Car Img">

        <a href="#"><img class ="social instagram" src="/img/social-media/instagram.svg" alt="Instagram icon"></a>
        <a href="https://www.youtube.com/watch?v=csAXruiBLTs&ab_channel=Mercedes-Benz"><img class ="social youtube" src="/img/social-media/youtube.svg" alt="Youtube Icon"></a>

    </div>
    <div class="right">
        <div class="content">
            <h1>the all new 2020<br>mercedes amg GT R</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh nisi tempor ipsum, mattis cursus
                gravida aenean dolor. Fermentum pharetra et habitasse netus gravida nibh. Est velit elementum nisl,
                tortor at elementum nulla. Egestas cras purus hendrerit aenean fermentum. </p>
            <button type="button">test drive now</button>
        </div>
    </div>
</section>

标签： htmlcss

解决方案

我已经成功地完成了我的转型。问题在于选择器的悬停位置错了。

代替.banner-left-img:hover { transform: scale(1.5); }

它应该是.banner .left:hover .banner-left-img { transform: translateY(-50%) scale(1.05); }

我要感谢 jQueryHtmlCSS 分享其他帮助我解决问题的线程。

推荐阅读