<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="side"> <div class="profile-callout"> <div class="profile-container"> <div class="overlay"> <img src="http://lorempixel.com/500/400/city/"> <div class="text"> <span class="green">Get to Know &raquo</span> <h1>Our Services</h1> <span>Hover to see more.</span> <span class="below-fold">This sentence is hidden. Thanks for hovering.:)</span> </div> </div> </div> </div> </div>

body { width: 100%; *zoom: 1; } body:before, body:after { content: ""; display: table; } body:after { clear: both; } body { background: #F5F5F5; } img { max-width: 100%; vertical-align: middle; } .side { width: 300px; margin: 2em auto; } .profile-callout { position: relative; overflow: hidden; height: 300px; } .profile-callout img { z-index: -1; position: relative; } .profile-callout .text { position: absolute; top: 60%; left: 1em; -webkit-transition: top 200ms ease; transition: top 200ms ease; color: #fff; text-shadow: 1px 1px #000; } .profile-callout .text h1 { margin: 0 0 0.75em; font-weight: 100; font-family: monospace; } .profile-callout .text span { display: block; margin: 0 0 0.25em; font-weight: 300; } .profile-callout .text span.green { color: #B0C74C; font-style: italic; margin: 0; } .profile-callout .text span.below-fold { padding-top: 2em; } .profile-callout:hover .text { top: 20%; } .profile-callout:hover:before { border: solid 0px white; } .profile-callout:hover .overlay { background-color: rgba(0, 47, 75, 0.85); } .profile-callout:before { content: ""; position: absolute; top: 0; left: 0; background: #B0C74C; border: solid 20px; border-color: #F5F5F5 transparent transparent #F5F5F5; border-radius: 0; box-shadow: -2px 2px 1px rgba(0, 0, 0, 0.1); -webkit-transition: border 200ms ease; transition: border 200ms ease; } .overlay { display: table; width: 100%; background-color: rgba(0, 47, 75, 0.5); -webkit-transition: background-color 200ms ease; transition: background-color 200ms ease; background-position: center top; height: 100%; z-index: 2; }