如何显示图像一半和鼠标悬停移动完整图像

Question

我为下面的代码创建了我的 bootstrap 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 -->

Answer 1

不确定这是你要找的，问题不是很清楚。 但这是我的理解：左侧的图像（其大小的一半）在悬停时向右滑动。

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

Answer 2

一种方法是使用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>