Hover to view animation on a link with CSS - html

Question

I am trying to create an effect on a website like this one: http://www.cssplay.co.uk/menu/css3-animation.html#x . My code only uses two images at the moment but I'll be using about 10 to 15 for the final animation. I'm trying to achieve the hover to view animation, the second image,not the click effect. Here's the code:
.footer nav ul.homeandlist li {
display: block;
width: 40%;
height: 150px;
float: left;
margin: 1% 3%;
background-color: rgba(255, 165, 0, 0.11);
}
.footer nav ul.homeandlist a {
margin: 0;
padding: auto;
width: 100%;
height: 90px;
text-indent: -9000px;
line-height: 2em;
font-size: 16px;
display: block;
}
.footer nav ul.homeandlist .GetOnList {
position: relative;
width: 40%;
height: 150px;
}
.footer nav ul.homeandlist .GetOnList a {
display: block;
-webkit-transition: z-index 0.1s linear;
transtion: z-index 0.1s linear;
}
.footer nav ul.homeandlist .GetOnList a#a1 {
background: url('images/image1.png');
}
.footer nav ul.homeandlist .GetOnList a#a2 {
background: url('images/image2.png');
}
.footer nav ul.homeandlist .hover a:hover {
z-index: 20;
}
.footer nav ul.homeandlist .hover a:hover + a {
z-index: 30;
}
.footer nav ul.homeandlist .hover a#a1 {
z-index: 20;
}
.footer nav ul.homeandlist .hover a#a2 {
z-index: 10;
}
<div class="footer">
<nav>
<p class="footertext">Text will go here</p>
<div class="clear"></div>
<ul class="homeandlist">
<li class="GetOnList hover">
<a id="a1" href="GetOnList.html">Get On List</a>
<a id="a2" href="GetOnList.html">Get On List</a>
</li>
<li class="HomeLink">HomeLink
</li>
</ul>
</nav>
</div>
So far only image 1 shows up but nothing happens on hover. To me it looks like I'm using the same code as what's used on the website. Any ideas?
I've edited the code to remove parts that may not matter. If more code is needed let me know and I can include what you need, but this should cover it.

Answer 1

Here's a new example: http://jsbin.com/wixume/5/edit
The code uses selectors to
MARK UP:
<div class="footer">
<nav>
<ul class="homeandlist">
<li id="addedId"><a id="a1">Get On List</a></li>
<li id="anotherAddedId"><a id="a2">Get On List</a></li>
<li id="lastOne"><a id="a3">Get On List</a></li>
</ul>
</nav>
</div>
CSS:
.footer nav ul.homeandlist li {
display: block;
}
.footer nav ul.homeandlist a {
width: 100%;
height: 90px;
display: block;
}
a{
position:absolute;
}
.footer nav ul.homeandlist li {
position: absolute;
width: 40%;
height: 150px;
}
.footer nav ul.homeandlist li {
display: block;
-webkit-transition: z-index 0.9s linear;
transtion: z-index 0.9s linear;
}
#a1 {
background-color: red;
}
#a2 {
background-color: yellow;
}
#a3 {
background-color: blue;
}
#addedId:hover {
/* Move the first one to the bottom when hover*/
z-index: 9;
}
li:hover + li {
/*
Move the second li to the top
If move mouse, the element below it gets selected and moved to the top.
...and so on for each one below that...
Once are hovering on the bottom one and we move,
nothing for a moment has a hover state so we can see the top li.
And then it starts all back over.
*/
z-index: 30;
}
#addedId {
z-index: 20;
}
#anotherAddedId {
z-index: 19;
}
#lastOne:{
z-index:10;
}