Source Code:
(back to article)
Submit
Result:
Report an issue
.box { display: inline-block; float: left; height: 150px; overflow: hidden; width: 20%; -webkit-transition: width 1.2s; -moz-transition: width 1.2s; transition: width 1.2s; } .box.books { background-color: #1c87c9; } .box.quizzes { background-color: #666666; } .box.snippets { background-color: #e6ae2e; } .box.tools { background-color: #8ebf42; } .box.functions { background-color: #eb4034; } .box a { color: #eeeeee; text-decoration: none; text-align: center; vertical-align: middle; height: 100%; display: block; padding-top: 20px; } .box span { display: block; position: relative; top: 100%; text-align: center; -webkit-transition: top 1s; -moz-transition: top 1s; transition: top 1s; } .nav:hover .box { width: 10%; } .nav .box:hover { width: 60%; } .box:hover span { top: 25%; }