代码之家 › 专栏 › 技术社区 › Dharmesh Vekariya

当我把鼠标悬停在li上时,我怎样才能想象只有左边的幻灯片

css3 css html

2

Dharmesh Vekariya · 技术社区 · 7 年前

-&燃气轮机;我在尝试悬停效果的时候,悬停在里边比图片左边的幻灯片要平滑。

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>

1 回复 | 直到 7 年前

1

2

Dharmesh Vekariya 7 年前

你需要设置 图像大小 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>