css show and slide div on hover wrapper

Question

I'm trying to find a solution for an image gallery! I have a box as a wrapper around each image. I now want to hide one icon on the right and on the left, inside the box not visible for the user. Just a transparent layer, maybe 5-10% of each side are visible. The icon seen in the JSFiddle shoud then slide in depending which layer is hovered. For example the icon on the right should delete the image and the icon on the left should make it as the title image of a post. I can handle the events with backbone but I'm not finding a solution for the css/html and maybe jQuery part.

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

thanks radzo

Answer 1

Something like this, here's a 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;
}