changing the appearance or locqtion of an image in its hovered state

wright67uk · October 16, 2011

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} ?

<!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;}


            
        </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="thumbs/1.jpg"><img src="thumbs/1.jpg" alt=""/></a>
                        <a href="http://www.flickr.com/photos/patdavid/3793395986/in/set-72157622106008372/"><img src="thumbs/2.jpg" alt=""/></a>
                        <a href="http://www.flickr.com/photos/patdavid/4242525457/in/set-72157622106008372/"><img src="thumbs/3.jpg" alt=""/></a>
                        <a href="http://www.flickr.com/photos/patdavid/3799109785/in/set-72157622106008372/"><img src="thumbs/4.jpg" alt=""/></a>
                        <a href="http://www.flickr.com/photos/patdavid/3871609087/in/set-72157622106008372/"><img src="thumbs/5.jpg" alt=""/></a>
                        <a href="http://www.flickr.com/photos/patdavid/3872388968/in/set-72157622106008372/"><img src="thumbs/6.jpg" alt=""/></a>
                        <a href="http://www.flickr.com/photos/patdavid/3866147681/in/set-72157622106008372/"><img src="thumbs/7.jpg" alt=""/></a>
                        <a href="http://www.flickr.com/photos/patdavid/3872389922/in/set-72157622106008372/"><img src="thumbs/8.jpg" alt=""/></a>
                        <a href="http://www.flickr.com/photos/patdavid/4127983465/in/set-72157622106008372/"><img src="thumbs/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>

Thankyou for reading.

Sign In

changing the appearance or locqtion of an image in its hovered state

Recommended Posts

wright67uk

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information