html - 将鼠标悬停在 li 上时，如何仅在左侧显示图像幻灯片

Question

ul.blog-grid { width: 100%; margin: 10% -15px 0; background-color: #f5f5f5; padding: 50px; display: inline-block; }
ul.blog-grid li { display: inline-block; width: 25%; float: left; padding: 0 15px; overflow: hidden; }
ul.blog-grid li:hover img { margin-left: 50px; }
img { max-width: 100%; }
.blog-image { overflow: hidden; }

<ul class="blog-grid">
  <li class="grid-item">
    <div class="blog-image">
      <img src="images/blog-img.jpg" alt="">
    </div>
  </li>
  <li class="grid-item">
    <div class="blog-image">
      <img src="images/blog-img.jpg" alt="">
    </div>
  </li>            
</ul>

Answer 1

您需要将图像大小设置得大一点，使用transform: translate3d CSS 属性可以很容易地管理位置。

ul.blog-grid {
  width: 100%;
  margin: 10% -15px 0;
  background-color: #f5f5f5;
  padding: 50px;
  display: inline-block;
}

ul.blog-grid li {
  display: inline-block;
  width: 25%;
  float: left;
  padding: 0 15px;
  overflow: hidden;
}

.blog-image {
  overflow: hidden;
  float: left;
  position: relative;
  cursor: default;
}

ul.blog-grid li img {
  max-width: 100%;
  max-width: none;
  width: calc(100% + 20px);
  width: -moz-calc(100% + 20px);
  width: -ms-calc(100% + 20px);
  -webkit-transition: opacity .35s, -webkit-transform .35s;
  transition: opacity .35s, transform .35s;
  -webkit-transform: translate3d(-10px, 0, 0);
  transform: translate3d(-10px, 0, 0);
  -moz-transform: translate3d(-10px, 0, 0);
  -ms-transform: translate3d(-10px, 0, 0);      
  -webkit-backface-visibility: hidden;
  -moz--webkit-backface-visibility: hidden;
  -ms--webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

ul.blog-grid li:hover img {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

<ul class="blog-grid">
  <li class="grid-item">
    <div class="blog-image">
      <img src="https://via.placeholder.com/350x250" alt="">
    </div>
  </li>
  <li class="grid-item">
    <div class="blog-image">
      <img src="https://via.placeholder.com/350x250" alt="">
    </div>
  </li>
</ul>