jquery空格图片滑动特效

jQuery空格图片滑动特效是一种非常流行的网页设计元素，它可以让网站页面更加生动且简洁。此特效通过鼠标悬停在图片上时出现的滑动效果来展示图片的内容，给用户带来更好的视觉体验。

代码如下：

// HTML代码
<div class="pic-list">
  <div class="pic-item">
    <img src="img-1.jpg" alt="图片1">
    <div class="pic-title">图片1标题</div>
  </div>
  <div class="pic-item">
    <img src="img-2.jpg" alt="图片2">
    <div class="pic-title">图片2标题</div>
  </div>
  <div class="pic-item">
    <img src="img-3.jpg" alt="图片3">
    <div class="pic-title">图片3标题</div>
  </div>
</div>

// CSS代码
.pic-list {
  display: flex;
  flex-wrap: wrap;
}
.pic-item {
  position: relative;
  width: 300px;
  height: 200px;
  margin: 10px;
  overflow: hidden;
}
.pic-item img {
  width: 100%;
  height: auto;
  transition: transform .3s ease;
}
.pic-item:hover img {
  transform: scale(1.2);
}

.pic-title {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 10px;
  background-color: rgba(0,.6);
  color: #fff;
  font-size: 16px;
  text-align: center;
  transition: transform .3s,opacity .3s;
  transform: translateY(100%);
  opacity: 0;
}
.pic-item:hover .pic-title {
  transform: translateY(0);
  opacity: 1;
}

以上代码中，pic-list代表一个包含图片和标题的容器，pic-item则是每个具体的项，里面包含图片和标题的内容。当鼠标悬停到pic-item项上时，图片会出现缩放的效果，同时标题也会从下方滑出来展示。这里特效实现的主要就是使用了CSS3的过渡效果和transform属性。