I created a basic menu using an unordered list:
<ul class="courses">
<a href="#">
<li class="spinny">
<h3>Course Title</h3>
<img class="rotateme" src="images/logo_transparent.png"/>
</li>
</a>
</ul>
When hovering over the li item, the background changes color and the img appears using a simple jQuery .toggle function:
$(".spinny").hover(function(){
$(".rotateme").toggle("fast");
});
The rotating effect on the image is achieved through CSS3 animation with the class name rotateme.
However, my issue is that the image covers everything else on the page instead of staying within the bounds of the li item. How can I fix this?
Furthermore, how can I apply this functionality to multiple list items?
To see a rough example on JSFiddle, click here. In the example, the entire circle image is displayed, but I want it confined within the grey box.