CSS在悬停包装纸上显示和幻灯片

Question

我正在尝试找到图像库的解决方案！我在每个图像周围有一个包装盒。我现在想在右侧和左侧隐藏一个图标，用户在框内不可见。只有一个透明的层，也许每侧的5-10％是可见的。在JSFIDDLE中看到的图标，然后根据徘徊在哪个图层中滑动。例如，右侧的图标应删除图像，左侧的图标应成为帖子的标题图像。我可以用骨干来处理事件，但我找不到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;
}

谢谢Radzo

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;
}