Creé mi sitio web de bootstrap 4 para el código a continuación, así que me cansé de mostrar la mitad de la imagen la primera vez porque había algún conflicto en mi código y no funciona correctamente cuando muevo el mouse después de mover toda la imagen de derecha a izquierda. izquierda. alguien sabe como hacerlo bien
Gracias
.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 -->No estoy seguro de que esto sea lo que estás buscando, la pregunta no es muy clara. Pero esto es lo que entendí: una imagen a la izquierda (a la mitad de su tamaño) que se desliza hacia la derecha cuando se desplaza.
.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 -->Una forma de hacerlo es usar la propiedad clip-path , la función inset() y la pseudo-clase :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>