Struggling with the nth child selector. Here is the HTML snippet:
HTML
<div class="container">
<ul class="mh-menu">
<li>
<a href="#">
<span>Chairman of the Board</span>
<span>Name</span>
</a>
<img src="images/richard.jpg" alt="richard"/>
<p>Some Text</p>
</li>
<li>
<a href="#">
<span>Chief Executive Officer</span>
<span>Name</span>
</a>
<img src="images/scott.jpg" alt="scott"/>
<p>Some text</p>
</li>
<li>
<a href="#">
<span>Executive Vice President</span>
<span>Name</span>
</a>
<img src="images/dana.png" alt="dana"/>
<p>Some Text</p>
</li>
<li>
<a href="#">
<span>Executive Vice President</span>
<span>Name</span>
</a>
<img src="images/jay.jpg" alt="jay"/>
<p>Some text</p>
</li>
</ul>
</div>
The corresponding CSS code looks like this:
CSS
.mh-menu li img {
position: absolute;
z-index: 1;
left: 0px;
top: 0px;
opacity: 0;
-webkit-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
-moz-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
-o-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
-ms-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
}
.mh-menu li p {
text-align: left;
position: absolute;
z-index: 1;
left: 540px;
top: 0px;
opacity: 0;
-webkit-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
-moz-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
-o-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
-ms-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
}
.mh-menu li:hover img {
left: 300px;
opacity: 1;
}
.mh-menu li:hover p {
left: 540px;
opacity: 1;
text-align: left;
}
A menu where hovering over a name displays an image and text on the right side. Currently, everything pops out at the top but I want to adjust the images so they pop out above the names when hovered over. How do I utilize nth-child to move each image down using the top: CSS property?
jsFiddle http://jsfiddle.net/FGGpY/5/