用jQuery点击图像叠加

Question

现在，当我点击图片时，它会将整个页面设置为具有60％的透明度。 我就是这样想影响自己点击的图像。

我正在使用Bootstrap，因此图像的高度/宽度可能略有不同。

演示： http://jsfiddle.net/txrt6zo1/

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

您需要将position: relative放入.thumb-overlay-content CSS。这将使absolve .after div相对于其容器的位置。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;