Crowned CSS

#lilboxposition {
    position:absolute;
    margin-top:50px; /* change the distance from the top of your page */
    right:20px; /* the distance from the right of the page, you can also change this to 'left' if you like to position the boxes - remember they will expand to the left! */
    background-color:transparent;
    z-index:9999;}

#lilbox{
    margin-bottom:10px;
    height:10px;
    border-left:10px solid #ED9600; /* change the color of the small boxes here - it's a good idea to match it to the border color in the next section */
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;}

#boxcontent{
    text-align:center; /* change the text alignment in your boxes here, use left, right, center or justify! */
    margin-left:-10px;
    height:0px;
    width:0px;
    overflow:hidden;
    opacity:0;
    border-top:10px solid #ED9600; /* change the color of the expanded top border here */
    background-color: transparent;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;}

#lilbox:hover #boxcontent {
    text-align:center;
    color:#000; /* change the color of your box text here */
    font-size:10px; /* and the font size! */
    height:300px;
    width:150px;
    margin-left:-200px;
    opacity:1;
    padding:20px;}