wright67uk Posted October 16, 2011 Share Posted 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. Link to comment https://forums.phpfreaks.com/topic/249231-changing-the-appearance-or-locqtion-of-an-image-in-its-hovered-state/ Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.