I am looking to use an unordered list to showcase a row of icons.
Currently, I have the icons growing in size on mouseover, but they are expanding downwards. What I actually need is for them to grow upwards. I believe this might be a positioning issue. Can someone provide a sample CSS solution?
Here is the HTML and CSS code:
<div id="container">
<ul>
<li><img src="test.jpg" /></li>
<li><img src="test.jpg" /></li>
<li><img src="test.jpg" /></li>
<li><img src="test.jpg" /></li>
<li><img src="test.jpg" /></li>
</ul>
</div> <!-- end of #container -->
<pre>
ul {
position: absolute;
}
li {
position: relative;
bottom: 0;
left:0;
}
ul li {
float: left;
}
ul li img:hover {
width: 142px;
height: 142px;
-moz-transition: all 0.2s ease-out;
-webkit-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
</pre>