如何顯示影像一半和滑鼠懸停移動完整影像

我為下面的代碼創建了我的引導程式 4 網站，所以我厭倦了第一次顯示一半的影像，因為我的代碼中存在一些沖突，并且在將整個影像從右移到右后移動滑鼠時它無法正常作業左。任何人都知道如何正確地做

示例原型在這里

謝謝

.moving-left
{

    position: relative;
    transition: transform 0.3s ease;
    transform: translateX(0px);

}
.moving-left:hover
{
    transform: translateX(-80px);
}

.moving-left button
{
    left: 14px;
    position: absolute;
    top: 30px;
    z-index: 99;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5 76PVCmYl" crossorigin="anonymous"></script>

<div class="row mb-75">
                        <div class="col-lg-7">
                            <div class="anime-image-wrapper">
                                <div class="feature-image-wrap ml--55">
                                    <div class="moving-left">
                                    <img src="https://colorlib.com/wp/wp-content/uploads/sites/2/best-bootstrap-admin-templates.jpg" class="wow zoom" alt="astriol feature">
                                    </div>
                                </div>

                                <span class="circle" data-parallax='{"y": -70}'></span>

                                <div class="anime-dot">
                                    <img src="media/feature/dot.png" alt="astrion dot">
                                </div>
                            </div>
                            <!-- /.anime-image-wrapper -->
                        </div>
                        <!-- /.col-md-6 -->

uj5u.com熱心網友回復：

不確定這是你要找的，問題不是很清楚。但這是我的理解：左側的影像（其大小的一半）在懸停時向右滑動。

.moving-left
{

    position: relative;
    transition: transform 0.3s ease;
    transform: translateX(-50vw);

}
.moving-left:hover
{
    transform: translateX(0vw);
}

.moving-left button
{
    left: 14px;
    position: absolute;
    top: 30px;
    z-index: 99;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5 76PVCmYl" crossorigin="anonymous"></script>

<div class="row mb-75">
                        <div class="col-lg-7">
                            <div class="anime-image-wrapper">
                                <div class="feature-image-wrap ml--55">
                                    <div class="moving-left">
                                    <img src="https://colorlib.com/wp/wp-content/uploads/sites/2/best-bootstrap-admin-templates.jpg" class="wow zoom" alt="astriol feature">
                                    </div>
                                </div>

                                <span class="circle" data-parallax='{"y": -70}'></span>

                                <div class="anime-dot">
                                    <img src="media/feature/dot.png" alt="astrion dot">
                                </div>
                            </div>
                            <!-- /.anime-image-wrapper -->
                        </div>
                        <!-- /.col-md-6 -->

uj5u.com熱心網友回復：

一種方法是使用clip-path屬性、inset()函式和:hover偽類。

#image-wrapper {
  background-color: black;
}

#img1 {
  clip-path: inset(0 50% 0 0);
}

#img2 {
  clip-path: inset(0 0 50% 0);
}

img:hover {
  clip-path: none !important;
}

<div id="image-wrapper">
  <img id="img1" src="https://www.google.fr/images/branding/googlelogo/1x/googlelogo_light_color_272x92dp.png" />
  <img id="img2" src="https://www.google.fr/images/branding/googlelogo/1x/googlelogo_light_color_272x92dp.png" />
</div>

標籤：javascript html css bootstrap-4

上一篇：CSSFlexbox：在較小的螢屏上重疊彈性專案的問題

下一篇：如何在懸停時更改按鈕中的嵌入影像？