I was looking for some cool code that made image bigger when you scroll over them. Well, I found what I was looking for but I am unable to figure out how to use the code. Here is where I found it http://www.cssplay.co.uk/menu/zoom.html It says in his FAQs that you just have to look and the source code and copy and paste it to your site. Well, I looked in the source and was unable to find anything. Can anyone here find out how I can get that code? Thanks
Well he does seem to be giving it away. Using FF, Right click on the page and select view source. It will open the source, find the line in the <head> that say: <link rel="stylesheet" media="all" type="text/css" href="../css/default.css" /> and click on the ../css/default.css" . That will open a window where you should be able to copy the CSS to notepad and then save. The zoom is really cool. Have fun
You guys are looking at the external CSS which is just his defualt stying on his page. However the actual feature he has presented on that page is a magnifier which is located in his internal CSS, like his other CSS code he is giving away. Which is here:
Okay thanks a bunch. So I would just copy that and paste it into my CSS right? Question: What do I need to put on my sites "page" to add the images that I want to pop. Thanks
You mean in your mark-up (HTML), you would need to put this: <div class="imageHolder"> <div class="pad pic1"> <!--[if lte IE 6]><a class="p1 wrap" href="#url"><table><tr><td><![endif]--> <ul class="outer"><li class="p1"><!--[if lte IE 6]><a class="p2 wrap" href="#url"><table><tr><td><![endif]--> <ul><li class="p2"><!--[if lte IE 6]><a class="p3 wrap" href="#url"><table><tr><td><![endif]--> <ul><li class="p3"><!--[if lte IE 6]><a class="p4 wrap" href="#url"><table><tr><td><![endif]--> <ul><li class="p4"><!--[if lte IE 6]><a class="p5 wrap" href="#url"><table><tr><td><![endif]--> <ul><li class="p5"><!--[if lte IE 6]><a class="p6 wrap" href="#url"><table><tr><td><![endif]--> <ul><li class="p6"><!--[if lte IE 6]><a class="p7 wrap" href="#url"><table><tr><td><![endif]--> <ul><li class="p7"><!--[if lte IE 6]><a class="p8 wrap" href="#url"><table><tr><td><![endif]--> <ul><li class="inner p8"> <img src="zoom/blank.gif" alt="" /> <div class="contents1"> <img src="zoom/ladybird.jpg" alt="" /> </div> </li></ul><!--[if lte IE 6]></td></tr></table></a><![endif]--> </li></ul><!--[if lte IE 6]></td></tr></table></a><![endif]--> </li></ul><!--[if lte IE 6]></td></tr></table></a><![endif]--> </li></ul><!--[if lte IE 6]></td></tr></table></a><![endif]--> </li></ul><!--[if lte IE 6]></td></tr></table></a><![endif]--> </li></ul><!--[if lte IE 6]></td></tr></table></a><![endif]--> </li></ul><!--[if lte IE 6]></td></tr></table></a><![endif]--> </li></ul><!--[if lte IE 6]></td></tr></table></a><![endif]--> </div> </div> Code (markup):
Dunno what he's doing, but the effect doesn't seem to work well. If you want to make an image bigger you can use the following - HTML: <div class="imgSize"> <a href=""><img src="yourimage.gif" alt="HOver to make this bigger"></a> </div> CSS: .imgSize a:link img {width:50px; height:50px;} .imgSize a:visited img {width:50px; height:50px;} .imgSize a:hover img {width:100px; height:100px;} .imgSize a:active img {width:100px; height:100px;} I didn't test it but it should work. Another way would be using Javascript for a cooler effect.