Overlay on image on click with jQuery

Question

Right now when I click an image, it sets the entire page to have 60% transparency. I'd just like this to effect the image that is clicked itself.

I am using Bootstrap so the images may vary a little in height/width.

Demo: http://jsfiddle.net/txrt6zo1/

$(".thumb-overlay-content").on('click',function() {
    $(this).toggleClass('rotateOut rotateIn');
});

.thumb-overlay-content { margin:10px; background:#CCC; float:left; text-align:center; padding:0px; }
.rotateOut { border:3px solid blue; }
.rotateIn { border:3px solid green; background:green; }
.rotateIn .after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    color: #FFF;
}
.rotateIn .after {
    display: block;
    background: rgba(0, 0, 0, .6);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="thumb-overlay-content animated rotateOut">
  <img src="http://placehold.it/200x200">
  <div class="after"></div>
</div>

<div class="thumb-overlay-content animated rotateOut">
  <img src="http://placehold.it/200x200">
  <div class="after"></div>
</div>

Answer 1

You need to put position: relative in .thumb-overlay-content CSS. This will make the position of the absolve .after div relative to its container.

$(".thumb-overlay-content").on('click', function() {
  $(this).toggleClass('rotateOut rotateIn');
});

.thumb-overlay-content {
  margin: 10px;
  background: #CCC;
  float: left;
  text-align: center;
  padding: 0px;
  position: relative;
}

.rotateOut {
  border: 3px solid blue;
}

.rotateIn {
  border: 3px solid green;
  background: green;
}

.rotateIn .after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  color: #FFF;
}

.rotateIn .after {
  display: block;
  background: rgba(0, 0, 0, .6);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="thumb-overlay-content animated rotateOut">
  <img src="http://placehold.it/200x200">
  <div class="after"></div>
</div>

<div class="thumb-overlay-content animated rotateOut">
  <img src="http://placehold.it/200x200">
  <div class="after"></div>
</div>