hover image over another image

I am confused with soemthing most likely quite simple, but I can't figure it out. I want Image 2 to cover Image 1 when I hover over Image 1. So, the goal is to overlap Image 1 with an Image 2 containing a semi-transparent color gradient. I know this could somehow be achieved with pure CSS, but I need it this way.

The below CSS Code was taken from another Typo3 CMS Website and there it works.

However, I can't seem to make it work on another part/element of that Typo3 website, I even can't make it work on a simple basic HTML page like this one.

<!DOCTYPE html>
<html>
<body>

<style>

.container {
    height: 300px;
    width: 500px;
    position: relative;
    background-color: red;
}

img {
    position: relative;
    height: 100%;
    width: 100%;
}

.container .hover-second-image-over-first-image:hover {
  width:100%;
  height:100%;
  background-image:url(image_02.jpg);
  background-position:top left;
  background-repeat: no-repeat;
  background-size:100%;
  position:absolute;
  opacity:0;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
</style>

<div class="container">
 <div class="hover-second-image-over-first-image"></div>
 <img src="image_01.jpg" />
</div>


</body>
</html>

Edit:

Ok, so "z-index:10;" did fix it for me. This code here works:

.container {
    height: 300px;
    width: 500px;
    position: relative;
    background-color: red;
}

img {
    position: relative;
    height: 100%;
    width: 100%;
}

.container .hover-second-image-over-first-image {
  width:100%;
  height:100%;
  background-image:url(image_02.jpg);
  background-position:top left;
  background-repeat: no-repeat;
  background-size:100%;
  position:absolute;
  z-index:10;
  opacity:0;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.container:hover .hover-second-image-over-first-image {
  opacity:.3;
}

But I still wonder why the code worked before on that other website WITHOUT any z-index position...

Solution

A few things to keep attention here :

Don't put your styles inside the <body> tag
Try to style the layer you want to see over the image whitout the use of the :hover state so it must be .container .hover-second-image-over-first-image
Use the :hover action on all the .container element

.container {
  height: 300px;
  width: 500px;
  position: relative;
  background-color: red;
}

img {
  position: relative;
  height: 100%;
  width: 100%;
}

.container .hover-second-image-over-first-image {
  width: 100%;
  height: 100%;
  background:blue;
  opacity:0;
  position: absolute;
  top:0;
  left:0;
  z-index:10;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
.container:hover .hover-second-image-over-first-image {
  opacity:.7;
}

<div class="container">
  <div class="hover-second-image-over-first-image"></div>
  <img src="http://placehold.it/200" />
</div>