1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

CSS (and maybe jquery) Blur hover effect

Discussion in 'CSS' started by eight84, Aug 7, 2010.

0
  1. #1
    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!
     
    eight84, Aug 7, 2010 IP
  2. Rimona

    Rimona Active Member

    Messages:
    123
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    63
    #2
    Rimona, Aug 7, 2010 IP
  3. eight84

    eight84 Active Member

    Messages:
    104
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #3
    eight84, Aug 7, 2010 IP
  4. Rimona

    Rimona Active Member

    Messages:
    123
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    63
    #4
    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>&nbsp;</p> 
Version 2
<p>&nbsp;</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>&nbsp;</p> 
<p>&nbsp;</p> 
Version 2
<p>&nbsp;</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.
     
    Rimona, Aug 8, 2010 IP
  5. eight84

    eight84 Active Member

    Messages:
    104
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #5
    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..
     
    eight84, Aug 11, 2010 IP
  6. wab

    wab Member

    Messages:
    57
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    43
    #6
    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
     
    wab, Aug 12, 2010 IP
  7. eight84

    eight84 Active Member

    Messages:
    104
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #7
    That's exactly it. What do you think it would look like on older browsers?
     
    eight84, Aug 12, 2010 IP
  8. eight84

    eight84 Active Member

    Messages:
    104
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #8
    though the blur on this one isnt as effective..you can still see the links clearly
     
    eight84, Aug 12, 2010 IP
  9. CSM

    CSM Active Member

    Messages:
    1,047
    Likes Received:
    25
    Best Answers:
    0
    Trophy Points:
    55
    #9
    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.
     
    CSM, Aug 12, 2010 IP
  10. rsergent

    rsergent Peon

    Messages:
    8
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #10
    is it possible when you hover over home the other links become blur?
     
    rsergent, Aug 12, 2010 IP
  11. wab

    wab Member

    Messages:
    57
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    43
    #11
    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
     
    wab, Aug 12, 2010 IP
  12. eight84

    eight84 Active Member

    Messages:
    104
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #12
    I guess I'd be better off using flash...
     
    eight84, Aug 15, 2010 IP