#hover boxes

lets start with the css -- you will need to make two basic text boxes - position and size them exactly the same so one will sit above the other...

#bottombox {    width:100px;    height:50px;    padding:20px;    position:fixed;    margin-top:50px;    margin-left:10px;    color:#000;    background:#ddd;}    

#topbox {    width:100px;    height:50px;    padding:20px;    opacity:1;    position:fixed;    margin-top:50px;    margin-left:10px;    color:#fff;    background:#000;    -webkit-transition: all 0.7s ease;    transition: all 0.7s ease;    -moz-transition: all 0.7s ease;    -o-transition: all 0.7s ease;}

you can style these however you like - keep the background and text colours the same if you want it to look like the text only is changing ( i just did it like this so that you can see the change more obviously! ).  to the top box, i’ve added a few extra lines - an ‘opacity 1′ to start with so that the bottom box is hidden beneath it.  and also a transition so that when i hover over it, it’s a nice smooth ‘fade in/fade out’ effect...

then we add in another css section - this is the instruction to trigger the effect - 

#topbox:hover {    opacity:0;    -webkit-transition: all 0.7s ease;    transition: all 0.7s ease;    -moz-transition: all 0.7s ease;    -o-transition: all 0.7s ease;}

this will make my ‘topbox’ completely transparent when hovered over, leaving only the bottom one, with your content visible.

and the html to go with it...

here is the bottom quote which will be revealed!

here is the top box with your original quote...

that’s it!