jquery - 悬停包装器上的 css 显示和滑动 div

Question

我正在尝试为图片库寻找解决方案!我有一个盒子作为每张图片的 wrapper 。我现在想在用户不可见的框中隐藏左右两侧的一个图标。只是一个透明层，每边可能有 5-10% 是可见的。在 JSFiddle 中看到的图标然后应该根据悬停的层滑入。例如，右边的图标应该删除图像，而左边的图标应该将其作为帖子的标题图像。我可以使用 backbone 处理事件，但我没有找到 css/html 和 jQuery 部分的解决方案。

.box {
    float: left;
    min-height: 282px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    width: 282px;
}
img {
    max-height: 282px;
    max-width: 100%;
    z-index: 1;
}

谢谢拉佐

Answer 1

像这样，这里有一个 FIDDLE

<div class="box">
  <span class="fa fa-camera fa-3x">
    <span class="title">Image Title</span>
    <span class="desc">Image description</span>
  </span>
  <span class="fa fa-times-circle fa-3x"></span>
  <img src="http://www.sylvain-lader.fr/wp-content/uploads/2012/07/placeholder.jpg"/>
</div>


.box {
  position: relative;
  float: left;
  height: 282px;
  width: 282px;
  overflow: hidden;
}
img {
  max-height: 282px;
  max-width: 100%;
}
.fa-camera,
.fa-times-circle {
  position: absolute;
  display: block;
  padding: 10px;
  width: 131px;
  height: 272px;
  transition: all 0.4s ease-in;
}
.fa-camera {
  left: -120px;
  text-align: left;
  font-size: 22px !important;
}
.fa-camera:hover {
  background: rgba(255,255,255,0.5);
  left: 0;
}
.fa-times-circle {
  right: -120px;
  text-align: right;
  font-size: 26px !important;
}
.fa-times-circle:hover {
  right: 0;
  cursor: pointer;
}
.title,
.desc {
  display: block;
}
.title {
  margin-top: 10px;
  font-size: 12px;
  font-weight: bold;
}
.desc {
  margin-top: 8px;
  font-size: 12px;
}