Mouseover image pulls other images down

Question

I'm having this problem with the images of the website I'm making. I've been trying different ways to solve it and this was the best I found so far. Still, it's not what I need. I have 8 buttons and I need the second one to be replaced by a bigger image. The thing is, it pulls the others down, and I wanted it to be over them. Is there a way to do it? This is what I did in the coding:

<a href="index.html">
<input type="image" src="hp-homebutton.png" alt="submit" style="position: relative;" value="Home Button"/> </a> <p>
<img src="hp-monthsbutton.png" onmouseover="this.src='hp-months.png'" onmouseout="this.src='hp-monthsbutton.png'" style="position: relative;"/> <p>
<img src="hp-forumbutton.png" style="position: relative;"/> <p>
<img src="hp-newsbutton.png" style="position: relative;"/> <p>
<img src="hp-contactbutton.png" style="position: relative;"/> <p>
<input type="image" src="hp-eventsbutton.png" alt="submit" style="position: relative;" value="Events Button" onclick="showImage();"/> <p>
<img src="hp-gallerybutton.png" style="position: relative;"/> <p>
<img src="hp-extrasbutton.png" style="position: relative;"/> <p>

Answer 1

Now I correctly understand what you want to achieve, you need to wrap your images inside elements, and give that parent a fixed height. Then you can add z-index to your images to ensure the correct image appears ontop. Check the demo below, I have changed your HTML slightly to demonstrate the principle.

JSFiddle Demo

HTML

<ul>
    <li><a href="index.html"><img src="http://s21.postimg.org/hzb9gge93/hp_homebutton.png" alt="Home" /></a></li>
    <li><a href="#"><img src="http://s21.postimg.org/bbentuuqv/hp_monthsbutton.png" alt="Months" onmouseover="this.src='http://s21.postimg.org/8ssyt690n/hp_months.png'" onmouseout="this.src='http://s21.postimg.org/bbentuuqv/hp_monthsbutton.png'" class="months" /></li>
    <li><a href="#"><img src="http://s21.postimg.org/rer4tnw9z/hp_forumbutton.png" alt="Forum" /></li>
    <li><a href="#"><img src="http://s21.postimg.org/ig12gmrdz/hp_newsbutton.png" alt="News" /></li>
</ul>

CSS

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul li {
    clear: both;
    height: 54px;
}

ul li img {
    position: relative;
    z-index: 1;
}

ul li .months {
    z-index: 2;
}