Can I make an element invisible to hang?

I have a div that has a starburst effect (transparent png background) that I want to overlay on a series of imgs when they freeze; I have to make the div large to contain the image, but then it makes it difficult to detect freezes on the images. (I have everything as background images, so they are downloaded using high resolution css multimedia material)

Each "image" is a series of elements that look like this:

<div class="section">
    <div class="starburst"></div>
    <a href="link">
        div class="image">
            <div class="non-hover"></div>
            <div class="hover"></div>
        </div>
        <p>Caption</p>
    </a>
</div>

Js is like this

$('.section a').hover(
    function () {
        $('.speaker .hover').hide();
        $(this).find('.non-hover').addClass('focus');
        $(this).find('.hover').stop().show().animate({opacity:1.0}, 1000);
    },
    function () {
        $(this).find('.hover').stop().animate({opacity:0.0}, 0);
        $(this).find('.non-hover').removeClass('focus');
    }
);

, .starbursts, , , bg- , . , , , . , -.