Fading an image into another image transition

I'm having a little difficulty getting this fade effect to work. I basically have two images on top of each other, and I have a hover effect that makes the opacity of the top image go to zero, which reveals the second image.

This effect is currently working when I have only one section. When I add another section, everything goes out of place. I suspect this has something to do with the fact that I'm using position: absolute, but I'm not sure how to go about fixing it.

I made a simple example to show you what is happening. This is what it looks like with one section (functional):

<body>
  <header>
    <h1>Projects</h1>
    <h3>
      <a href="/">Home</a> | <a href="#">GitHub</a>
    </h3>
  </header>

  <hr>

  <section>
    <h2>Some project</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <div class="container">
      <img class="main image" src="http://i.imgur.com/EkfA9Tl.png" alt="">
      <img class="image" src="http://i.imgur.com/PWsXij1.png" alt="">
    </div>
  </section>
</body>

header {
  text-align: center;
}
section {
  width: 960px;
  margin: 0 auto;
}
.container {
  position: relative;
}
img {
  position: absolute;
  width: 650px;
  height: 400px;
  display: block;
}
.main {
  z-index: 5;
  transition: opacity .3s ease-in-out;
}
.main:hover {
  opacity: 0;
}

You can see it here: http://jsfiddle.net/503dhw51/

When I try using two sections, the entire thing breaks. This is the code for two sections:

<body>
  <header>
    <h1>Projects</h1>
    <h3>
      <a href="/">Home</a> | <a href="#">GitHub</a>
    </h3>
  </header>

  <hr>

  <section>
    <h2>Some project</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <div class="container">
      <img class="main image" src="http://i.imgur.com/EkfA9Tl.png" alt="">
      <img class="image" src="http://i.imgur.com/PWsXij1.png" alt="">
    </div>
  </section>

  <section>
    <h2>Some project</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <div class="container">
      <img class="main image" src="http://i.imgur.com/EkfA9Tl.png" alt="">
      <img class="image" src="http://i.imgur.com/PWsXij1.png" alt="">
    </div>
  </section>
</body>

and the CSS is the same.

Here is the jsfiddle for it: http://jsfiddle.net/5asgswxr/1/

I basically have two issues I need to fix:

Getting this to work for multiple sections
Somehow centering the images once I've fixed the first part

I would appreciate any help with either of these issues. Thanks in advance!

Solution

As you suspected, the issue is that you are absolutely positioning all of the img elements. When an element is absolutely positioned, it is removed from the normal flow, resulting in other elements not taking it into consideration (thus, the overlap).

Since the .container element only contains absolutely positioned elements, it collapses upon itself and has a height of 0. To avoid this, one option would be to set an explicit height/width on the parent element.

Alternatively, the better option would be to only absolutely position a single img element. In doing so, the .container element will remain in the normal flow (because one of the img element's isn't removed from the flow). In this case, you could absolutely position the img element with class .main. In doing so, the other img element remains in the normal flow and defines the height/width of the parent, .containerelement.

Updated Example

.container {
  position: relative;
}
.container img.main {
  position: absolute;
}

For your second question (about centering), take a look at this updated example.