I am trying to create a hover effect for the link similar to this: http://motyarblog.000space.com/blur_effect_with_css.html except the opposite. So if I have a navigation menu that has "Home About Pricing Contact" on it. When I scroll over "home" all the other links blur but home does not. Same with the rest of the menu the item on hover stays the same the other menu items blur. Does anyone know where I can find a script or help with this? I don't know the exact effect name so I haven't had much luck with Google finding a tutorial. Thanks!
The effect you pointed to is both CSS and jquery. The effect you describe you want can be achieved with switching images in CSS only. Here are two examples: http://www.andyrutledge.com/cssslides.html http://www.webreference.com/programming/css_flicker/examples/flicker.htm If you need further help - shout!
http://www.myers-photography.com/index.html this is what I have now...how would i apply that to create the desired effect?
Results are here: http://comp-4u.com/dp/eight84/test.html CSS Code /* ***** VERSION 1 ***** */ #menu { display:block; width:481px; height:50px; } #menu ul {margin:0; padding:0; list-style-type:none;} #menu li {float:left; margin-right:0;} #menu a {display:block; width:120px; height:0; padding-top:50px; color:#000; overflow:hidden;} /* hack for older versions of IE with incorrect box model */ * html #menu a:link, * html #menu a:visited {height:50px; he\ight:0;} #menu a#item1 {background:transparent url(graphics/menuH.png) -0px -50px no-repeat} #menu a#item2 {background:transparent url(graphics/menuP.png) -0px -50px no-repeat;} #menu a#item3 {background:transparent url(graphics/menuS.png) -0px -50px no-repeat;} #menu a#item4 {background:transparent url(graphics/menuC.png) -0px -50px no-repeat;} /* Adding the :hover style */ #menu a#item1:hover {background-position:0 0; z-index:50;} #menu a#item2:hover {background-position:0 0; z-index:50;} #menu a#item3:hover {background-position:0 0; z-index:50;} #menu a#item4:hover {background-position:0 0; z-index:50;} * html #menu a:hover {height:50px; he\ight:0;} /* ***** VERSION 2 ***** */ #menu2 { display:block; width:481px; height:50px; } #menu2 ul {margin:0; padding:0; list-style-type:none;} #menu2 li {float:left; margin-right:0;} #menu2 a {display:block; width:120px; height:0; padding-top:50px; color:#000; overflow:hidden;} /* hack for older versions of IE with incorrect box model */ * html #menu2 a:link, * html #menu2 a:visited {height:50px; he\ight:0;} #menu2 a#item1 {background:transparent url(graphics/menuH2.png) -0px -50px no-repeat} #menu2 a#item2 {background:transparent url(graphics/menuP2.png) -0px -50px no-repeat;} #menu2 a#item3 {background:transparent url(graphics/menuS2.png) -0px -50px no-repeat;} #menu2 a#item4 {background:transparent url(graphics/menuC2.png) -0px -50px no-repeat;} /* Adding the :hover style */ #menu2 a#item1:hover {background-position:0 0; z-index:50;} #menu2 a#item2:hover {background-position:0 0; z-index:50;} #menu2 a#item3:hover {background-position:0 0; z-index:50;} #menu2 a#item4:hover {background-position:0 0; z-index:50;} * html #menu2 a:hover {height:50px; he\ight:0;} Code (markup): HTML Code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <p> </p> Version 2 <p> </p> <div id="menu"> <ul> <li class="list1"><a id="item1" href="#" title="Home"></a></li> <li class="list2"><a id="item2" href="#" title="Pricing"></a></li> <li class="list3"><a id="item3" href="#" title="Services"></a></li> <li class="list4"><a id="item4" href="#" title="Contact"></a></li> </ul> </div> <p> </p> <p> </p> Version 2 <p> </p> <div id="menu2"> <ul> <li class="list1"><a id="item1" href="#" title="Home"></a></li> <li class="list2"><a id="item2" href="#" title="Pricing"></a></li> <li class="list3"><a id="item3" href="#" title="Services"></a></li> <li class="list4"><a id="item4" href="#" title="Contact"></a></li> </ul> </div> </body> </html> HTML: Graphics: http://comp-4u.com/dp/eight84/graphics/menuH.png http://comp-4u.com/dp/eight84/graphics/menuP.png http://comp-4u.com/dp/eight84/graphics/menuS.png http://comp-4u.com/dp/eight84/graphics/menuC.png and for the second set: http://comp-4u.com/dp/eight84/graphics/menuH2.png http://comp-4u.com/dp/eight84/graphics/menuP2.png http://comp-4u.com/dp/eight84/graphics/menuS2.png http://comp-4u.com/dp/eight84/graphics/menuC2.png You can get rid of the notches in the corners of the graphics. I used them as an aid. I hope this is what you were looking for.
Thank you very much for this example. I was looking for an effect though when you scroll over one link the rest of them blur out. So the menu looks normal when you see the page...then when you scroll over "home" the links pricing, services, and contact all blur out. Kind of like a camera focus effect. I hope that makes sense. I think I am just missing one key element to do this effect..
try this: <html> <head> <style> .menu{ margin:0; padding:0; list-style-type:none; } .menu li{ display:inline; float:left; margin:10px; } .normal{ color:#000; font-size:1.2em; text-decoration:none; } .blur{ color: #999; font-size:1.2em; text-shadow: 0px 0px 3px #000; text-decoration:none; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $('a').hover(function(){ $('a').not(this).addClass('blur').removeClass('normal'); },function(){ $('a').not(this).addClass('normal').removeClass('blur'); }); }); </script> </head> <body> <ul class="menu"> <li><a href="#" class="normal">Item 1</a></li> <li><a href="#" class="normal">Item 2</a></li> <li><a href="#" class="normal">Item 3</a></li> <li><a href="#" class="normal">Item 4</a></li> </ul> </body> </html> Code (markup): It's using CSS3 box-shadow, so it's not compatible with every browsers
Browsers that can not parse CSS3 properties won't show those properties. You can use e.g. browsershots.org to check how it looks in other/older browsers.
the blur is given by the third option of the text-shadow attribute: text-shadow: 0px 0px [COLOR="red"]3px[/COLOR] #000; Code (markup): So you can increase it to get the effect you want. If you want something compatible with every browsers, you gonna have to use some images