Im trying to assign a hover state to the nine thumbnail images in the code below;

Ive tried
.thumbs a img:hover {height:100px; width:100px;} to make the image larger but with no joy. any ideas? (im using IE)

www.1pw.co.uk/circles.html

eventually I plan to get the hovered state image to appear in the large circle and was thinking along the lines of;
.thumbs a img:hover {position: absoloute; top 150px; left 150px} ?



Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>Animated Circular Portfolio with jQuery</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta name="description" content="Animated Circular Portfolio with jQuery" />
        <meta name="keywords" content="jquery, animate, circle, round, portfolio, design, tutorial"/>
        <link rel="stylesheet" type="text/css" media="screen"/>
        <style>
            *{
                margin:0;
                padding:0;
            }
            body{
                font-family:Arial;
                background:#a7cede;
            }
            .title{
                position:absolute;
                top:0px;
                left:0px;
                width:130px;
                height:570px;
                background:#a7cede url(http://www.1pw.co.uk/title.png) no-repeat top left;
            }
            a.back{
                background:transparent url(http://www.1pw.co.uk/back.png) no-repeat 0px 0px;
                position:absolute;
                width:150px;
                height:27px;
                outline:none;
                top:2px;
                right:0px;
            }
			.wrapper{
    font-family: Verdana;
    font-size:11px;
    width:600px;
    height:600px;
    position:relative;
    top:11px;
    left:11px;
}
.images img{
    display:none;
    position:absolute;
    left:6px;
    top:6px;
}
.circleBig{
    position:absolute;
    top:0px;
    left:0px;
    width:368px;
    height:368px;
    background:transparent url(http://www.1pw.co.uk/circlebg.png) no-repeat top left;
}
.menu{
    position:absolute;
    width:101px;
    height:74px;
    top:210px;
    left:220px;
    z-index:999;
}
a.about, a.portfolio, a.contact{
    float:left;
    clear:both;
    height:23px;
    margin-bottom:10px;
    width:105px;
    text-indent:-2000000px;
    opacity:0.8;
    background:transparent url(http://www.1pw.co.uk/menu.png) no-repeat top left;
}
a.portfolio{
    width:90px;
    background-position:-105px 0px;
}
a.contact{
    width:88px;
    background-position:-199px 0px;
}
a.about:hover, a.portfolio:hover, a.contact:hover{
    opacity:1.0;
}
.circle{
    margin-top:-88px;
    margin-left:-88px;
    width:176px;
    height:176px;
    position:absolute;
    left:0;
    top:0;
    background:transparent url(http://www.1pw.co.uk/circle.png) no-repeat top left;
    z-index:10;
    opacity:0;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}
.description{
    width:120px;
    margin:40px auto;
    text-align:center;
}
.description ul{
    list-style:none;
    text-align:center;
}
.description ul a{
    line-height:30px;
    font-weight:bold;
    color:#fff;
    text-decoration:none;
    text-transform:uppercase;
    font-size:11px;
    text-shadow:1px 1px 1px #aaa;	
}
.description ul a:hover{
    color:#f0f0f0;
}
.thumbs a img{
    border:3px solid #f9f9f9;
    -moz-box-shadow:1px 1px 2px #999;
    -webkit-box-shadow:1px 1px 2px #999;
    box-shadow:1px 1px 2px #999;
}
.thumbs a img:hover {height:100px; width:100px; overflow:visible; position:absolute; top:300px; left:300px;}  


            
        </style>
        <!--[if IE]>
		 <style>
                    .circle{
                        background:transparent url(http://www.1pw.co.uk/circleIE.gif) no-repeat top left;
                    }
                    .description ul a{
                        font-weight:normal;
                    }
		</style>
        <![endif]-->
    </head>
    <body>
        <div id="content">
            <div class="wrapper">
                <div id="images" class="images">
                    <img id="image_about" src="http://www.1pw.co.uk/1.png" alt="" width="352" height="352" style="display:block;"/>
                    <img id="image_portfolio" src="http://www.1pw.co.uk/2.png" alt="" width="352" height="352"/>
                    <img id="image_contact" src="http://www.1pw.co.uk/3.png" alt="" width="352" height="352" />
                </div>
                <div class="circleBig">
                    <div id="menu" class="menu">
                        <a id="about" class="about" href="">About me</a>
                        <a id="portfolio" class="portfolio" href="">Portfolio</a>
                        <a id="contact" class="contact" href="">Contact</a>
                    </div>
                </div>
            </div>
            <div id="circle_about" class="circle">
                <div class="description">
                    <ul>
                        <li><a href="#">Who I am</a></li>
                        <li><a href="#">What I do</a></li>
                        <li><a href="#">My CV</a></li>
                    </ul>
                </div>
            </div>
            <div id="circle_portfolio" class="circle">
                <div class="description">
                    <div class="thumbs">
                        <a href="1.jpg"><img src="1.jpg" alt=""/></a>
                        <a href="2.jpg"><img src="2.jpg" alt=""/></a>
                         <a href="3.jpg"><img src="3.jpg" alt=""/></a>
                          <a href="4.jpg"><img src="4.jpg" alt=""/></a>
                           <a href="5.jpg"><img src="5.jpg" alt=""/></a>
                            <a href="6.jpg"><img src="6.jpg" alt=""/></a>
                             <a href="7.jpg"><img src="7.jpg" alt=""/></a>
                              <a href="8.jpg"><img src="8.jpg" alt=""/></a>
                               <a href="9.jpg"><img src="9.jpg" alt=""/></a>
                    </div>
                </div>
            </div>
            <div id="circle_contact" class="circle">
                <div class="description">
                    <ul>
                        <li><a href="#">Email </a></li>
                        <li><a href="#">Phone</a></li>
                        <li><a href="#">Website</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- The JavaScript -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script type="text/javascript" src="http://www.1pw.co.uk/jquery.path.js"></script>
        <script type="text/javascript">
            $(function() {
                
                /* when page loads animate the about section by default */
                //move($('#about'),2000,2);

                $('#menu > a').mouseover(
                function(){
                    var $this = $(this);
                    move($this,800,1);
                }
            );

                /*
                function to animate / show one circle.
                speed is the time it takes to show the circle
                turns is the turns the circle gives around the big circle
                 */
                function move($elem,speed,turns){
                    var id = $elem.attr('id');
                    var $circle = $('#circle_'+id);

                    /* if hover the same one nothing happens */
                    if($circle.css('opacity')==1)
                        return;

                    /* change the image */
                    $('#image_'+id).stop(true,true).fadeIn(650).siblings().not(this).fadeOut(650);

                    /*
                    if there's a circle already, then let's remove it:
                    either animate it in a circular movement or just fading out, depending on the current position of it
                     */
					 
					 /*
					 left, top
					 */
					 
                    $('#content .circle').each(function(i){
                        var $theCircle = $(this);
                        if($theCircle.css('opacity')==1)
                            $theCircle.stop()
                        .animate({
                            path : new $.path.arc({
                                center	: [180,189],
                                radius	: 257,
                                start	: 65,
                                end     : -110,
                                dir	: -1
                            }),
                            opacity: '0'
                        },1500);
                        else
                            $theCircle.stop()
                        .animate({opacity: '0'},200);
                    });

                    /* make the circle appear in a circular movement */
                    var end = 65 - 360 * (turns-1);
                    $circle.stop()
                    .animate({
                        path : new $.path.arc({
                            center	: [180,189],
                            radius	: 257,
                            start	: 180,
                            end		: end,
                            dir		: -1
                        }),
                        opacity: '1'
                    },speed);
                }
            });
        </script>
    </body>
</html>