Updates Box 2 CSS | kimsjongin.tumblr.com

#candywrapper {/*the container for all 3 boxes (this is why the other boxes get pushed down when you hover one of them)*/
    position:fixed;
    width:130px;
    top:10px;
    left:10px;
    z-index:9999999999999999;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}

/* tutorial by kimsjongin.tumblr.com and inspired by thisis-mydesign (please leave this note!)
if you only want one updates tab, erase anything that says #tab2 or #tab3; for instance, on the line that says #tab1, #tab2, #tab3 { change it to just #tab1 { */

#titletab {
    display:inline-block;
    color:#999;/*color of the titles on the updates boxes*/
    background:#fff;/*background color of the title tab (just make sure it's the same color as your theme background is)*/
    letter-spacing:0px;
    font-family:calibri;
    font-size:8px;
    text-transform:uppercase;
    margin-left:10px;
    padding:4px 5px 3px 5px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}

#tab2, #tab1, #tab3 {
    margin-bottom:5px;/*space between the tabs*/
}

#tab1:hover #titletab, #tab2:hover #titletab, #tab3:hover #titletab {
    margin-left:70px;/*how far the title moves after you hover*/
    letter-spacing:1px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}

#titletab:after{/*the top border (the one that extends first)*/
    content:'';
    position:fixed;
    width:0px;
    height:1px;
    margin-top:5px;
    left:15px;
    background:#999;/*color of the border*/
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}

#tab1:hover #titletab:after, #tab2:hover #titletab:after, #tab3:hover #titletab:after{
    width:65px;/*width of top line after hover*/
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}

#titletab:before{
    z-index:999999999999;
    content:'';
    position:fixed;
    width:8px;/*width of lil box*/
    height:8px;/*height of lil box*/
    margin-top:1px;
    left:10px;
    background:#999;/*color of the lil box*/
    border:1px solid #999;/*border color of the lil box*/
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}

#tab1:hover #titletab:before, #tab2:hover #titletab:before, #tab3:hover #titletab:before {
    background:#fff;/*background color of the lil box after hover*/
    border:1px solid #999;/*border color of the lil box after hover*/
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}

#in {/*here, you can style the text on the inside as well as the color of the second border*/
    font-size:9px;/*font size*/
    font-family:calibri;/*font; can be arial, baskerville, whatever*/
    padding:0px 10px;
    height:0px;
    width:100px;
    margin-top:-2px;
    margin-left:5px;
    border-left:1px solid #999;/*color of the second border; just change #999 to whatever color you want (pick one at colorpicker.com)*/
    color:transparent;
    overflow:hidden;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}

#tab1:hover #in, #tab3:hover #in, #tab2:hover #in{
    color:#999;/*color of the text on the inside*/
    height:95px;/*height of border/text after hovering; if your text doesn't fit in the box, make this bigger*/
    padding:10px;
    margin-top:-9px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition-delay: 0.4s;/*this and the line below are how long you wait before the second line starts to extend down */
    -webkit-transition-delay: 0.4s;
}