Jquery 无缩放的CSS幻灯片图像

我制作了“图像滑块”，当我将鼠标悬停在一张图像上时，它会放大并显示信息（它应该显示一些信息），现在它不是，我想问我如何才能使它们不像这样卡住（下面的img）并且只显示其中的一部分，你有什么想法吗

---

我没有时间把它放在codepen sry上

请在你的问题中加入相关代码。我们将更容易帮助你我知道我知道sry。。。代码正在提交…您是否尝试过使用背景图像？另一种可能是将图像包装在父级中，并让父级使用overflow:hidden将其切断。也请分享你的代码！嗯，我确实使用了bacground图像，效果非常好…但是还有其他方法吗…你有这个idk的例子或名称吗？这个叫什么？我在搜索“图像手风琴”时发现了

<div class=" " id="approach-img">
    <ul class="row ">
        <li class="col-md-3">
            <img src="https://cdn.homedit.com/wp-content/uploads/2011/09/modern-interior-design-apatment-brazil.jpg" />
        </li>
        <li class="col-md-3">
            <img src="https://cdn.homedit.com/wp-content/uploads/2011/09/modern-interior-design-apatment-brazil.jpg" />
        </li>
        <li class="col-md-3">
            <img src="https://cdn.homedit.com/wp-content/uploads/2011/09/modern-interior-design-apatment-brazil.jpg" />
        </li>
        <li class="col-md-3">
            <img src="https://cdn.homedit.com/wp-content/uploads/2011/09/modern-interior-design-apatment-brazil.jpg" />
        </li>
    </ul>
</div>

#approach-img ul {
  list-style: none;
  margin: 0;
  padding: 0;
}  


#approach-img ul li {
  float: left;
  margin: 0;
  padding: 0;
  /*width: 250px;*/
  overflow: hidden;

  -webkit-transition: width .5s ease;
  -moz-transition: width .5s ease;
  -o-transition: width .5s ease;
  transition: width .5s ease;
}

#approach-img ul li img {
  margin: 0;
  padding: 0;
  width:600px;
  height:400px;
}

#approach-img ul:hover li {
   width: calc((100% - 600px)/3);
}
#approach-img ul:hover li:hover {
  width: 600px;
}