How to show image half and mouse hover to move full image-CodePudding

I created my bootstrap 4 website for the code below, so I got tired of showing half the image the first time because there was some conflict in my code and it does not work properly when I move the mouse after moving the whole image from right to left. Anyone knows how to do it right

Example PROTOTYPE HERE

Thanks

.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 -->

CodePudding user response：

Not sure that this is what you're looking for, the question is not very clear. But here is what i understood: An image on the left (to the half of it's size) that slides right when hovered.

.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 -->

CodePudding user response：

One way of doing it is to use the clip-path property, the inset() function and the :hover pseudo-class.

#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>