Bootstrap snippet: Portfolio with details on hover

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: list,detail,hover



<div class="container bootstrap snippet"> <div class="row"> <div class="col-sm-8 col-md-9 col-lg-9 text-center"> <h1 class="text-primary"><b>Portfolio</b></h1> </div> </div> <div class="row"> <div class="media"> <div class="row"> <div class="media-img col-sm-4 col-md-3 col-lg-3"> <div class="img-overlay"> <a href="#" class="btn btn-primary">Details</a> </div> <img class="port-image" src="http://lorempixel.com/400/400/business/6/"> </div> <div class="col-sm-8 col-md-9 col-lg-9"> <h3> <a href="#"> Portfolio name </a> </h3> <h6> <span class="Newsletter">Newsletter</span> <span class="sep">/</span> <span class="Web Design">Web Design</span> <span class="sep">/</span> </h6> <p> A complete description for this work y para no utilizar lorem ipsum escribire mucho texto por ejemplo Bootdey es una galería de fragmentos de bootstrap gratis Códigos html Css Js </p> </div> </div> </div> <div class="media"> <div class="row"> <div class="media-img col-sm-4 col-md-3 col-lg-3"> <div class="img-overlay"> <a href="#" class="btn btn-primary">Details</a> </div> <img class="port-image" src="http://lorempixel.com/400/400/nature/6/"> </div> <div class="col-sm-8 col-md-9 col-lg-9"> <h3> <a href="#"> Portfolio name </a> </h3> <h6> <span class="Newsletter">Newsletter</span> <span class="sep">/</span> <span class="Web Design">Web Design</span> <span class="sep">/</span> </h6> <p> A complete description for this work y para no utilizar lorem ipsum escribire mucho texto por ejemplo Bootdey es una galería de fragmentos de bootstrap gratis Códigos html Css Js </p> </div> </div> </div> <div class="media"> <div class="row"> <div class="media-img col-sm-4 col-md-3 col-lg-3"> <div class="img-overlay"> <a href="#" class="btn btn-primary">Details</a> </div> <img class="port-image" src="http://lorempixel.com/400/400/people/6/"> </div> <div class="col-sm-8 col-md-9 col-lg-9"> <h3> <a href="#"> Portfolio name </a> </h3> <h6> <span class="Newsletter">Newsletter</span> <span class="sep">/</span> <span class="Web Design">Web Design</span> <span class="sep">/</span> </h6> <p> A complete description for this work y para no utilizar lorem ipsum escribire mucho texto por ejemplo Bootdey es una galería de fragmentos de bootstrap gratis Códigos html Css Js </p> </div> </div> </div> </div> </div>
@import url('http://fonts.googleapis.com/css?family=Open+Sans:200,300'); body{ font-family: 'Open Sans',Arial,Helvetica,Sans-Serif; background: none repeat scroll 0 0 #ebeeed; } .port-image{ width:400px; height:400px; } .media { background: none repeat scroll 0 0 #fff; border-bottom: 1px solid #c7c9c8; margin-bottom: 30px; } .media a { overflow: hidden; } .media-img { overflow: hidden; padding: 0; position: relative; } .media-img .img-overlay { background: none repeat scroll 0 0 rgba(0, 0, 0, 0.4); height: 100%; opacity: 0; padding-top: 50%; position: absolute; text-align: center; transition: opacity 0.3s ease-out 0s; visibility: hidden; width: 100%; z-index: 4; } .media:hover .img-overlay a, .media .img-overlay:hover a { display: inline-block; } .media:hover .img-overlay, .media .media-img:hover .img-overlay { opacity: 1; transition: opacity 0.3s ease-out 0s; visibility: visible; } .media div.media-img img { height: auto; transform: scale(1, 1); transition-duration: 2000ms; transition-timing-function: ease-out; width: 100%; }
Dey-Dey

Portfolio with details on hover

Dey-Dey
  Jul 7th 2014, 19:09
3.6K Views