<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2> <div class="pro"> <ul> <li> <span></span> <div class="actions"> <div class="actions-wrapper">cfvbcvb</div> </div> </li> </ul> </div> </div> </div>

.pro{ } .pro ul li{ display: block; width: 200px; float: left; position:relative; } .pro ul li span{ display: block; width: 200px; height: 200px; background: #eeeeee; border: 1px solid #ccc; } .actions { position: absolute; bottom: 0; left: 0; width: 100%; z-index: 11; margin: 0; -webkit-transition: all 0.25s ease-in; transition: all 0.25s ease-in; -webkit-transform: rotateX(125deg); -ms-transform: rotateX(125deg); transform: rotateX(125deg); -webkit-transform-origin: bottom; -moz-transform-origin: bottom; -ms-transform-origin: bottom; transform-origin: bottom; z-index: 9999; } .actions-wrapper { position: relative; width: 100%; height: 36px; display: table; white-space: nowrap; } .pro ul li:hover .actions { -webkit-transform: rotateX(0); -ms-transform: rotateX(0); transform: rotateX(0); }