Portfolio with blue hover

This bootstrap snippet called "Portfolio with blue hover" was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code
tags: portfolio

This is the HTML code for this bootstrap snippet

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview tab

<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="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://lorempixel.com/300/150/nature/7/" alt="works">
                </div>
            </div>
        </div>
    </div>
</div>

This is the CSS code for this bootstrap snippet

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview

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;
}
                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.3.6

Created: Oct 10th 2016, 09:39

Views: 136