CODEWITHSUNDEEP
javascriptjquerycss
ElendilTheTall
ElendilTheTall

Reputation: 1452

Showing an image only within a certain area

I have a simple menu in 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 the user hovers over the li item, the background changes colour and the img is displayed using a simple jQuery .toggle function:

$(".spinny").hover(function(){
            $(".rotateme").toggle("fast");
});

The image is also spinning thanks to some CSS3 animation, hence the class name rotateme, but I don't think that matters.

My problem is that the image is displayed on top of everything else, whereas I'd like to only show it within the bounds of the li item (as if it was a background-image essentially). How can I do this?

Also, how can I scale this up to multiple list items?

EDIT: Rough JSFiddle example here. As you can see, the whole circle is shown. I just want to show it where it lies inside the grey box.

Upvotes: 1

Views: 85

Answers (1)

RobH
RobH

Reputation: 3612

.spinny { overflow: hidden; }

Is your easiest solution. Other than that, you'd have to set an appropriate size on the image so that it isn't bigger than the list item.

In response to your comment:

$(".spinny").hover(function(){
        $(this).find(".rotateme").toggle("fast");
});

Upvotes: 1

Related Questions