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)
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; 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>