<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 ----------> <section class="portfolio"> <div class="container portfolio_contain padding_both_80"> <h1 class="text-center heading_style">MY PORTFOLIO</h1> <hr class="common " /> <div class="row padt_30"> <div class="col-lg-4 col-sm-6 col-md-6 portfolio_contain_box text-center"> <img src="http://dev.pixelspeaks.in/bootsnipp_images/graphic_1-u5582-fr.jpg" class="img-responsive" alt="..image"> <div class="overlay text-center"> <span>Project Title</span> </div> </div> <div class="col-lg-4 col-sm-6 col-md-6 portfolio_contain_box"> <img src="http://dev.pixelspeaks.in/bootsnipp_images/graphic_2-u7842-fr.jpg" class="img-responsive" alt="..image"> <div class="overlay text-center"> <span>Project Title</span> </div> </div> <div class="col-lg-4 col-sm-6 col-md-6 portfolio_contain_box"> <img src="http://dev.pixelspeaks.in/bootsnipp_images/graphic_3-u5562-fr.jpg" class="img-responsive" alt="..image"> <div class="overlay text-center"> <span>Project Title</span> </div> </div> </div> <div class="row padt_30"> <div class="col-lg-4 col-sm-6 col-md-6 portfolio_contain_box"> <img src="http://dev.pixelspeaks.in/bootsnipp_images/graphic_4-u7844-fr.jpg" class="img-responsive" alt="..image"> <div class="overlay text-center"> <span>Project Title</span> </div> </div> <div class="col-lg-4 col-sm-6 col-md-6 portfolio_contain_box"> <img src="http://dev.pixelspeaks.in/bootsnipp_images/graphic_5-u5609-fr.jpg" class="img-responsive" alt="..image"> <div class="overlay text-center"> <span>Project Title</span> </div> </div> <div class="col-lg-4 col-sm-6 col-md-6 portfolio_contain_box"> <img src="http://dev.pixelspeaks.in/bootsnipp_images/graphic_6-u7846-fr.jpg" class="img-responsive" alt="..image"> <div class="overlay text-center"> <span>Project Title</span> </div> </div> </div> </div> </section>

.portfolio { background: #f5f5f5; background-attachment: fixed; background-size: cover; } .portfolio_contain_box { position: relative; } .portfolio_contain_box:hover img { filter: brightness(50%); transition: all ease 0.3s; } .portfolio_contain_box:hover .overlay { animation-name: portfolio_hover; animation-duration: 1s; opacity: 0.9; } .overlay { transition: all ease 0.3s; position: relative; font-weight: bold; opacity: 0; border: 1px solid #fff; background: rgba(0, 0, 0, 0.7); transform: translateY(-51px); } .overlay span { font-size: 35px; color: #fff; } hr.common { margin: 25px auto 30px; padding: 0; max-width: 250px; border: 0; border-top: dashed 3px; text-align: center; border-color: #8d8d8d ; } hr.tie::after{ content: "\f02d"; } @-moz-keyframes portfolio_hover { 0% { transform: translateY(0px); } 100% { transform: translateY(-51px); } } @-webkit-keyframes portfolio_hover { 0% { transform: translateY(0px); } 100% { transform: translateY(-51px); } } @-o-keyframes portfolio_hover { 0% { transform: translateY(0px); } 100% { transform: translateY(-51px); } }