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

• badAdviceGuy: I don't see any JS in your fiddle, have you tried to get this to work already?
• Marc Radziwill: nope i thought it would be easier with some css. Just wanted to know some ideas how to get to it ;)

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