Black image fade over image [duplicate]

.wrap {
  width: 100px;
  height: 100px;
  position: relative;
}
.effect {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background: none;
  /* First we need to help some browsers along for this to work.
     Just because a vendor prefix is there, doesn't mean it will
     work in a browser made by that vendor either, it's just for
     future-proofing purposes I guess. */
  -o-transition: .5s;
  -ms-transition: .5s;
  -moz-transition: .5s;
  -webkit-transition: .5s;
  /* ...and now for the proper property */
  transition: .5s;
}
.effect:hover {
  background: rgba(0, 0, 0, 0.4);
}

<div class="wrap">
  <img src="http://placehold.it/100x100">
  <div class="effect"></div>
</div>