SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict
    Join Date
    Feb 2013
    Posts
    289
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How do i do this hover effect?

    Check the effect by hovering the menu items on this page http://www.borgo27.it/

    How would I do something like this?

  2. #2
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The link nav is setup like this:

    <a href="/residenza">
    <span style="margin-top: 0px;">Residenza</span>
    <span class="over">Residenza</span>
    </a>

    I am assuming when hovered it moves the position of the main text and moves up the position of the hidden text. Also looks like it may have a small subtle css3 skew or perspective. You will need to have the li tag overflow set to hidden. so as to not show the hidden text


    Hope that helps!

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    They use JavaScript on that menu, but it isn't necessary to do so. You could do it with CSS alone. Here's an example:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    
    <title>hover transition</title>
    	
    <style media="all">
    ul {
        overflow: hidden;
        list-style: none;
    }
    
    li {
        float: left;
    }
    
    a {
        line-height: 1em; 
        height: 1em; 
        padding: 0 30px;
        display: block; 
        overflow: hidden; 
        text-decoration: none;
    }
    
    span {
        height: 1em; 
        display: block; 
        color: #999; 
        -webkit-transition: all linear .3s; 
        -moz-transition: all linear .3s; 
        -o-transition: all linear .3s; 
        -ms-transition: all linear .3s; 
        transition: all .3s;
    }
    
    span + span {
        color: #444;
    }
    
    a:hover span:first-child {
        margin-top: -1em;
    }
    </style>
    	
    </head>
    <body>
    
    <ul>
        <li>
            <a href="#">
                <span>Residenza</span>
                <span>Residenza</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span>Residenza</span>
                <span>Residenza</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span>Residenza</span>
                <span>Residenza</span>
            </a>
        </li>
    </ul>
    </body>
    </html>

  4. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,820
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Chiming in, albeit a little late.

    Ralph, is of course right, you sample site uses .js. Which is not necessarily a bad thing when you consider how superfluous this kind of effect is.

    I was working on a CSS only solution for this as well ( as that is often my weapon of choice) which gets around the fact that pseudo elements cant be animated. The trick begin, I didn't animate the pseudo element, just the span. and the pseudo element acts as the "rigid" part of the solution.


    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    
    <title>hover transition</title>
    	
    <style media="all">
    ul {
        overflow: hidden;
        list-style: none;
    }
    
    li {
        float: left;
    }
    
    a {
        line-height: 1em; 
        height: 1em; 
        padding: 0 30px;
        display: block; 
        overflow: hidden; 
        text-decoration: none;
    }
    
    span {
        height: 1em; 
        display: block; 
        color: #999;
        -webkit-transition: all linear .3s; 
        -moz-transition: all linear .3s; 
        -o-transition: all linear .3s; 
        -ms-transition: all linear .3s; 
        transition: all .3s;
    }
    
    a:after  { 
    	content:attr(name); 
    	display:block;
        color: #444;
        height: 1em; 
        margin-top:1em;
        overflow:hidden;
    }
    
    a:hover span { height:0; margin-top:-1em}
    </style>
    	
    </head>
    <body>
    
    <ul>
        <li>
            <a href="#" name="Residenza">
                <span>Residenza</span>
             </a>
        </li>
        <li>
            <a href="#" name="Que Cosi?">
                <span>Que Cosi?</span>
             </a>
        </li>
        <li>
            <a href="#" name="Fa bene!">
                <span>Fa Bene!</span>
             </a>
        </li>
    </ul>
    </body>
    </html>
    The benefit , of course, is that you don't need the duplicate span tag and degrades nicely in UA which dont support animations. The draw back, which I think is minor, is you need to put the info for the generated pseudo element somewhere ( I used the name attribute, but if you dont mind CSS3 only support, or not being strictly validated you could create your own attribute or use a HTML5 data attribute) You could also hard code it into your CSS tho that seems like a pain for upkeep.

    hope this helps!

  5. #5
    SitePoint Addict
    Join Date
    Feb 2013
    Posts
    289
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    Chiming in, albeit a little late.

    Ralph, is of course right, you sample site uses .js. Which is not necessarily a bad thing when you consider how superfluous this kind of effect is.

    I was working on a CSS only solution for this as well ( as that is often my weapon of choice) which gets around the fact that pseudo elements cant be animated. The trick begin, I didn't animate the pseudo element, just the span. and the pseudo element acts as the "rigid" part of the solution.


    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    
    <title>hover transition</title>
    	
    <style media="all">
    ul {
        overflow: hidden;
        list-style: none;
    }
    
    li {
        float: left;
    }
    
    a {
        line-height: 1em; 
        height: 1em; 
        padding: 0 30px;
        display: block; 
        overflow: hidden; 
        text-decoration: none;
    }
    
    span {
        height: 1em; 
        display: block; 
        color: #999;
        -webkit-transition: all linear .3s; 
        -moz-transition: all linear .3s; 
        -o-transition: all linear .3s; 
        -ms-transition: all linear .3s; 
        transition: all .3s;
    }
    
    a:after  { 
    	content:attr(name); 
    	display:block;
        color: #444;
        height: 1em; 
        margin-top:1em;
        overflow:hidden;
    }
    
    a:hover span { height:0; margin-top:-1em}
    </style>
    	
    </head>
    <body>
    
    <ul>
        <li>
            <a href="#" name="Residenza">
                <span>Residenza</span>
             </a>
        </li>
        <li>
            <a href="#" name="Que Cosi?">
                <span>Que Cosi?</span>
             </a>
        </li>
        <li>
            <a href="#" name="Fa bene!">
                <span>Fa Bene!</span>
             </a>
        </li>
    </ul>
    </body>
    </html>
    The benefit , of course, is that you don't need the duplicate span tag and degrades nicely in UA which dont support animations. The draw back, which I think is minor, is you need to put the info for the generated pseudo element somewhere ( I used the name attribute, but if you dont mind CSS3 only support, or not being strictly validated you could create your own attribute or use a HTML5 data attribute) You could also hard code it into your CSS tho that seems like a pain for upkeep.

    hope this helps!
    Quote Originally Posted by ralph.m View Post
    They use JavaScript on that menu, but it isn't necessary to do so. You could do it with CSS alone. Here's an example:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    
    <title>hover transition</title>
    	
    <style media="all">
    ul {
        overflow: hidden;
        list-style: none;
    }
    
    li {
        float: left;
    }
    
    a {
        line-height: 1em; 
        height: 1em; 
        padding: 0 30px;
        display: block; 
        overflow: hidden; 
        text-decoration: none;
    }
    
    span {
        height: 1em; 
        display: block; 
        color: #999; 
        -webkit-transition: all linear .3s; 
        -moz-transition: all linear .3s; 
        -o-transition: all linear .3s; 
        -ms-transition: all linear .3s; 
        transition: all .3s;
    }
    
    span + span {
        color: #444;
    }
    
    a:hover span:first-child {
        margin-top: -1em;
    }
    </style>
    	
    </head>
    <body>
    
    <ul>
        <li>
            <a href="#">
                <span>Residenza</span>
                <span>Residenza</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span>Residenza</span>
                <span>Residenza</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span>Residenza</span>
                <span>Residenza</span>
            </a>
        </li>
    </ul>
    </body>
    </html>
    Quote Originally Posted by Surrealstudio View Post
    The link nav is setup like this:

    <a href="/residenza">
    <span style="margin-top: 0px;">Residenza</span>
    <span class="over">Residenza</span>
    </a>

    I am assuming when hovered it moves the position of the main text and moves up the position of the hidden text. Also looks like it may have a small subtle css3 skew or perspective. You will need to have the li tag overflow set to hidden. so as to not show the hidden text


    Hope that helps!
    Thanks for the answers guys! Im going to the out your solutions!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •