Bootstrap snippet: Portfolio with blue 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: portfolio



<div class="works-v1" id="works-section"> <div class="container"> <h2 class="site-section">Our Works</h2> <p class="site-section-p">Accusamus consulatu qui eu, et facilis molestiae pri.<br> No est percipit prodesset signiferumque</p> </div> <div class="row"> <div class="col-md-3 col-sm-6 col-lg-3 col-xs-6"> <div class="work-box"> <div class="work-box-hover"> <h3><a href="#">Jumping Like a Boss</a></h3> <h6>City / Ilustration</h6> </div> <div class="work-box-cover"> <img src="http://lorempixel.com/300/150/nature/1/" alt="works"> </div> </div> </div> <div class="col-md-3 col-sm-6 col-lg-3 col-xs-6"> <div class="work-box"> <div class="work-box-hover"> <h3><a href="#">Jumping Like a Boss</a></h3> <h6>City / Ilustration</h6> </div> <div class="work-box-cover"> <img src="http://lorempixel.com/300/150/nature/2/" alt="works"> </div> </div> </div> <div class="col-md-3 col-sm-6 col-lg-3 col-xs-6"> <div class="work-box"> <div class="work-box-hover"> <h3><a href="#">Jumping Like a Boss</a></h3> <h6>City / Ilustration</h6> </div> <div class="work-box-cover"> <img src="http://lorempixel.com/300/150/nature/1/" alt="works"> </div> </div> </div> <div class="col-md-3 col-sm-6 col-lg-3 col-xs-6"> <div class="work-box"> <div class="work-box-hover"> <h3><a href="#">Jumping Like a Boss</a></h3> <h6>City / Ilustration</h6> </div> <div class="work-box-cover"> <img src="http://lorempixel.com/300/150/nature/3/" alt="works"> </div> </div> </div> <div class="col-md-3 col-sm-6 col-lg-3 col-xs-6"> <div class="work-box"> <div class="work-box-hover"> <h3><a href="#">Jumping Like a Boss</a></h3> <h6>City / Ilustration</h6> </div> <div class="work-box-cover"> <img src="http://lorempixel.com/300/150/nature/4/" alt="works"> </div> </div> </div> <div class="col-md-3 col-sm-6 col-lg-3 col-xs-6"> <div class="work-box"> <div class="work-box-hover"> <h3><a href="#">Jumping Like a Boss</a></h3> <h6>City / Ilustration</h6> </div> <div class="work-box-cover"> <img src="http://lorempixel.com/300/150/nature/5/" alt="works"> </div> </div> </div> <div class="col-md-3 col-sm-6 col-lg-3 col-xs-6"> <div class="work-box"> <div class="work-box-hover"> <h3><a href="#">Jumping Like a Boss</a></h3> <h6>City / Ilustration</h6> </div> <div class="work-box-cover"> <img src="http://lorempixel.com/300/150/nature/6/" alt="works"> </div> </div> </div> <div class="col-md-3 col-sm-6 col-lg-3 col-xs-6"> <div class="work-box"> <div class="work-box-hover"> <h3><a href="#">Jumping Like a Boss</a></h3> <h6>City / Ilustration</h6> </div> <div class="work-box-cover"> <img src="http://lorempixel.com/300/150/nature/7/" alt="works"> </div> </div> </div> </div> </div>
body{margin-top:20px;} .works-v1 { padding: 100px 30px; } .works-v1 .work-box { position: relative; margin-bottom: 30px; overflow: hidden; } .works-v1 .work-box .work-box-cover { text-align: center; } .works-v1 .work-box .work-box-hover { position: absolute; left: 0; right: 0; text-align: center; z-index: 3; padding: 38px 10px; top: 0; margin-top: -60px; height: 120px; opacity: 0; } .works-v1 .work-box .work-box-hover:after { position: absolute; top: 0; left: 0; right: 0; content: ""; z-index: -1; bottom: 0; opacity: 0.9; background: #1ab0db; } .works-v1 .work-box:hover .work-box-hover { opacity: 1; top: 50%; } .works-v1 .work-box .work-box-hover h3 { text-align: center; text-transform: uppercase; font-size: 16px; line-height: 1.5em; color: #fff; margin: 0 auto 3px; font-weight: 600; } .works-v1 .work-box .work-box-hover h3 a { color: inherit; } .works-v1 .work-box .work-box-hover h3 a:hover { color: #333; } .works-v1 .work-box .work-box-hover h6 { text-align: center; font-size: 13px; line-height: 1.5em; font-weight: 400; color: #fff; margin: 0 auto; } .site-section { color: #333333; font-size: 30px; font-weight: 600; text-align: center; margin: 0 auto 60px; line-height: 1.2em; } .site-section.white { color: #fff; } .site-section-p { text-align: center; margin: -50px auto 60px; color: #808080; line-height: 1.7em; font-size: 16px; }
Dey-Dey

Portfolio with blue hover

Dey-Dey
  Oct 10th, 09:39
13 Views