CODEWITHSUNDEEP
jqueryhtmlcss
Marc Radziwill
Marc Radziwill

Reputation: 175

css show and slide div on hover wrapper

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

Upvotes: 0

Views: 1218

Answers (1)

Milan and Friends
Milan and Friends

Reputation: 5610

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

Upvotes: 1

Related Questions