How do i do this hover effect?

HTML & CSS
1

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

How would I do something like this?

2

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

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:


<!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

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.


<!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

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