<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="slidingdoors"> <div class="slidetop"></div> <div class="slideright"></div> <div class="slidebottom"></div> <div class="slideleft"></div> </div>

body{ background: #333 url(/images/classy_fabric.png); width: 960px; margin: 0 auto; padding: 15px; } .slidingdoors div{ color: #fff; font-family: 'Verdana'; font-weight: bold; overflow: hidden; width: 200px; height: 100px; position: relative; float: left; margin: 15px; box-sizing: border-box; transition: border .7s ease; border-radius: 3px; box-shadow: 0 0 10px #000, 0 0 0 5px #fff; } .slidetop{ background: #fff url(http://iweb.uz/azik/wp-content/uploads/2012/10/samarkand1.jpg) right; border-top: solid 100px #ccc; } .slidetop:hover{ border: solid 0px; } .slidebottom{ background: #fff url(http://iweb.uz/azik/wp-content/uploads/2012/10/samarkand1.jpg) top right; border-bottom: solid 100px #ccc; } .slidebottom:hover{ border: solid 0px; } .slideleft{ background: #fff url(http://iweb.uz/azik/wp-content/uploads/2012/10/samarkand1.jpg) bottom right; border-left: solid 200px #ccc; } .slideleft:hover{ border: solid 0px; } .slideright{ background: #fff url(http://iweb.uz/azik/wp-content/uploads/2012/10/samarkand1.jpg) left; border-right: solid 200px #ccc; } .slideright:hover{ border: solid 0px; } h3{ font-family: "Courier"; color: #fff; text-align: right; margin-right: 50px; text-shadow: 2px 2px 3px #000; } h3 a{ color: #fff; text-decoration: none; }