css show and slide div on hover wrapper

Problem

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

Problem courtesy of: radzo

Solution

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;
}
Solution courtesy of: mdesdev

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.