Moving a foreground image with CSS

Question

I am trying to move a foreground image with CSS so it overlaps a little with a background image. I simply cannot seem to get the foreground image to move anywhere and I just can't figure out what I'm doing wrong. Can anyone point me in the right direction? See my fiddle.

html:

<img src="http://image.tmdb.org/t/p/w1000/aUYcExsGuRaw7PLGmAmXubt1dfG.jpg" style="-webkit-mask-image: -webkit-gradient(linear, left top, left bottom,   from(rgba(0,0,0,1)), to(rgba(0,0,0,0)))"
    width="auto" height="400" class="backgroundImg">
<div class="frontImg">
<img  src="http://image.tmdb.org/t/p/w150/2i0JH5WqYFqki7WDhUW56Sg0obh.jpg" class="" height="300" width="auto">
 </div>

css:

body{
 background: black;
}
.background{
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}
.frontImg{
  position: absolute;
  left:200;
  top:500;
  z-index: 1;
}

Answer 1

You are missing the unit (%, em, px, etc.) of height and width of .frontImg

body{
  background:black;
}
.backgroundImg {
  position:absolute;
  left:0px;
  top:0px;
  z-index:-1;
  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}
.frontImg{
  position:absolute;
  left:200px;
  top:100px;
  z-index: 1;
}

<img src="http://image.tmdb.org/t/p/w1000/aUYcExsGuRaw7PLGmAmXubt1dfG.jpg" width="auto" height="400" class="backgroundImg">
<div class="frontImg">
  <img src="http://image.tmdb.org/t/p/w150/2i0JH5WqYFqki7WDhUW56Sg0obh.jpg" height="300" width="auto">
</div>

Additionaly you can do some optimization: You can move the css from style attributes to your css file, to get a clean html structure without any inline css.

And i think there is a typo on your CSS - replace .background with .backgroundImg.