1. Code the permalink as you want it to look

Code the tags and notes like you normally would to make them look as you want. For my "touch" theme I wanted everything in a box underneath the post, the date and notes in a row and the tags under the border, so here's the code for that:

#permalink {

        padding-top:10px;

        font-family:arial;

        line-height:100%;

    }

#dating {

        height:auto;

        width:100%;

        margin-top:10px;

        padding-top:10px;

        padding-bottom:10px;

        background-color:{color:background};

        border-bottom:solid 1px #e6e6e6;

        font-size:8px;

        text-transform:uppercase;

        text-align:center;

    }

    #tags {

        height:auto;

        width:100%;

        padding-top:10px;

        padding-bottom:10px;

        background-color:transparent;

        font-size:7px;

        word-spacing:1px;

        text-transform:uppercase;

        text-align:center;

        line-height:160%;

        -webkit-transition: all 0.6s ease-out;

        -moz-transition: all 0.6s ease-out;

        transition: all 0.6s ease-out;

    }

    #tags a {

        padding:2px 5px 2px 5px;

        background-color:#ffffff;

        opacity:0.4;

    }

    #tags a:hover {

        padding:2px 5px 2px 5px;

        opacity:1;

    }

2. Add opacity:0 to the permalink to make it invisible:

#permalink {

        padding-top:10px;

        font-family:arial;

        line-height:100%;

        opacity:0;

    }

3. Add this little piece of code anywhere above the </body> tag:

.posts:hover #permalink {

        opacity:1;

    }

It's important to make this effect the single posts and not all at once so the piece of code that determines the post width is the one you want to put before hover. So if you've called the box in wich the posts are scrolling #postcontainer and the actual posts with their width and all .miniposts then yours would look like this: .miniposts:hover #permalink etc.