Position two images on top of another - html

Question

I have some social media icons at the bottom of my page. They are png images, and I would like to replace those images with a different one when they are hovered. I want to use the first solution given here and put the two images on top of one another.
However, I'm having trouble putting the images on top of each other. I'm not sure what the right positioning is to use in order to make this work. Can someone give me a hint? (Not insterested in using JavaScript for this, I don't know how that works yet.
HTML
<div class="footer" align="center">
<ul>
<li>Follow Us:</li>
<a><img src="Images/Social Icons/Facebook-Hover.png"><img src="Images/Social Icons/Facebook.png"></a>
<a><img src="Images/Social Icons/Twitter-Hover.png"><img src="Images/Social Icons/Twitter.png"></a>
<a><img src="Images/Social Icons/Instagram-Hover.png"><img src="Images/Social Icons/Instagram.png"></a>
<a><img src="Images/Social Icons/Pinterest-Hover.png"><img src="Images/Social Icons/Pinterest.png"></a>|
<li><a>About Us</a></li> |
<li><a>Ask Us</a></li> |
<li><a>Contact Us</a></li>
</ul>
</div>
CSS:
.footer {
background-color: #061336;
padding: 15px;
padding-bottom: 25px;
position: fixed;
width: 100%;
bottom: 0px;
}
.footer li {
font-family: Roboto, Arial;
margin-left: 10px;
margin-right: 20px;
display: inline-block;
text-decoration: none;
color: #ffffff;
transition: ease-in-out all 200ms;
-moz-transition: ease-in-out all 200ms;
-webkit-transition: ease-in-out all 200ms;
-o-transition: ease-in-out all 200ms;
}
.footer li:hover {
opacity: .7;
transition: ease-in-out all 200ms;
-moz-transition: ease-in-out all 200ms;
-webkit-transition: ease-in-out all 200ms;
-o-transition: ease-in-out all 200ms;
}
.footer img {
height: 25px;
margin-left: 3px;
margin-right: 3px;
right: 13px;
top: 6px;
position: relative;
}

Answer 1

There's a pretty simple solution using the :first-child CSS selector.
.footer ul a {
display: block;
position: relative;
width: [your icon width]px;
height: [your icon height]px;
}
.footer ul a img {
position: absolute;
top: 0;
left: 0;
}
.footer ul a img:first-child {
opacity: 0;
z-index: 10;
position: absolute;
top: 0;
left: 0;
}
.footer ul a:hover img:first-child {
opacity: 0.7;
}

Answer 2

Create sprite sheet images - Here you can find tutorial how to create http://css-tricks.com/css-sprites/

Answer 3

This is what I would do instead, because, this way I don't have to struggle with "margin-top: -100px", or worse, javascript.
.myicon{
width:50px;
height:50px;
background:red;
-moz-transition: background .25s ease-in-out;
-webkit-transition: background .25s ease-in-out;
transition: background .25s ease-in-out;
}
.myicon:hover{
background:blue;
}
<div class='myicon'></div>