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