<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="media"><img class="media__image" src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg"> <div class="media__body"> <h2>Image Title</h2> <p>Descridweqyweu6uption</p> </div> </div>

.media { display: inline-block; position: relative; vertical-align: top; } .media__image { display: block; } .media__body { background: rgba(41, 128, 185, 0.7); bottom: 0; color: white; font-size: 1em; left: 0; opacity: 0; overflow: hidden; padding: 3.75em 3em; position: absolute; text-align: center; top: 0; right: 0; -webkit-transition: 0.6s; transition: 0.6s; } .media__body:hover { opacity: 1; } .media__body:after, .media__body:before { border: 1px solid rgba(255, 255, 255, 0.7); bottom: 1em; content: ''; left: 1em; opacity: 0; position: absolute; right: 1em; top: 1em; -webkit-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5); -webkit-transition: 0.6s 0.2s; transition: 0.6s 0.2s; } .media__body:before { border-bottom: none; border-top: none; left: 2em; right: 2em; } .media__body:after { border-left: none; border-right: none; bottom: 2em; top: 2em; } .media__body:hover:after, .media__body:hover:before { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; } .media__body h2 { margin-top: 0; } .media__body p { margin-bottom: 1.5em; }