<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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="holder"> <div class="image"> <img src="http://farm3.staticflickr.com/2804/4388157074_f49ba0271f.jpg" width="500" height="333" alt="Aston Martin"/> <div class="details"> <h1>Aston Martin</h1> <p>Lorem ipsum dolor. Aenean scelerisque odio ut dui feugiat commodo. Nulla blandit erat vel nisi consectetur ac pharetra augue consectetur</p> <a href="#">Find out more</a> </div> </div> </div>

body { font-family: arial, georgia, sans-serif; } h1 { margin: 0; font-size: 1.1em; } h1, p, a { font-weight: lighter; color: white; text-decoration: none; } .holder { width: 500px; height: 333px; margin: 0 auto; padding: 10px; -moz-box-shadow: 0 0 5px #333; -webkit-box-shadow: 0 0 5px #333; box-shadow: 0 0 5px #333; background-color: #f2f2f2; } .holder .image { position: relative; width: 500px; height: 333px; overflow: hidden; } .holder .image:hover .details { top: 0; left: 0; transform: rotate(0deg); } .holder .image:hover .details h1 { left: 0; transition-delay: 200ms; } .holder .image:hover .details a { right: 0; transition-delay: 400ms; } .holder .image:hover .details p { opacity: 1; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; transition-delay: 500ms; } .holder .image .details { width: 350px; height: 250px; position: absolute; top: 0; left: 0; background: rgba(0, 0, 0, 0.8); width: 100%; height: 100%; position: absolute; left: -100%; top: -100%; transition: all 200ms linear; transform: rotate(90deg); } .holder .image .details h1 { padding: 10px 20px; background: rgba(13, 114, 199, 0.7); position: absolute; top: 25px; left: -100%; transition: left 200ms linear; } .holder .image .details p { width: 80%; position: absolute; top: 40%; left: 10%; opacity: 0; } .holder .image .details a { position: absolute; right: 1000%; top: 80%; padding: 10px 20px; background: rgba(13, 114, 199, 0.7); }