"card hover effect + ravi"
Bootstrap 3.2.0 Snippet by ravi7284007

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="latest_project"> <div class="container"> <h3>Latest </h3> <div class="row"> <div class="col-md-4"> <div class="project_div"> <img src="https://img4.goodfon.com/original/960x800/6/1c/risunok-avengers-infinity-war-mstiteli-voina-beskonechnosti.jpg" alt="" class="img-responsive"> <div class="project_hover"> <h3>Casual</h3> <hr> <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p> <a href="http://facebook.com/ravi7284007" target="_blank">View Profile</a> </div> </div> </div> <div class="col-md-4"> <div class="project_div"> <img src="https://img4.goodfon.com/original/960x800/a/cc/marvel-comics-venom-art-komiks.jpg" alt="" class="img-responsive"> <div class="project_hover pro_delhi"> <h3>Dapper</h3> <hr> <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p> <a href="https://www.instagram.com/ravi_singh_7/" target="_blank">View Profile</a> </div> </div> </div> <div class="col-md-4"> <div class="project_div"> <img src="https://img5.goodfon.com/original/960x800/0/18/dedpul-deadpool-komiks-fantastika-marvel-raian-reinolds-ryan.jpg" alt="" class="img-responsive"> <div class="project_hover pro_omnis"> <h3>Minimal</h3> <hr> <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p> <a href="https://www.instagram.com/ravi_singh_7/" target="_blank">View Profile</a> </div> </div> </div> </div> </div> </div>
body{ height:1000px; background:url(https://img4.goodfon.com/original/1229x691/a/49/black-widow-robert-downey-jr-black-panther-exclusive-falco-2.jpg) no-repeat center;} img{ max-width:100%;} .latest_project { background-color: #f7f7f7; padding: 0 0 30px } .latest_project .project_div { position: relative; overflow: hidden; height:529px; } .latest_project .project_div p{ color:#fff;} .latest_project .project_div img{ height:100%;} .more_project h3, .latest_project h3 { color: #4e4e4e; font: normal 22px 'latoregular'; text-align: center; margin: 20px 0; } .more_project h3 { margin: 40px 0 } .latest_project p { font: normal 14px/18px 'latolight'; } .project_hover { position: absolute; background: rgba(12,91,80,0.95); top: 0; bottom: 0; right: -250px; width: 250px; text-align: center; transition: all 0.45s ease-in-out; padding: 180px 20px; } .pro_delhi { background: rgba(162,0,2,0.95) } .pro_omnis { background: rgba(0,119,217,0.95) } .latest_project .col-md-4:hover .project_hover { right: 0; transition: all 0.45s ease-in-out; } .project_hover a { color: #fff; border: 1px solid #fff; display: inline-block; padding: 10px; margin: 65px 0px 0 } .project_hover a:focus { text-decoration: none } .project_hover a:hover { text-decoration: none; background: #fff; color: #222 } .project_hover h3 { color: #FFFFFF; margin: 0 } .project_hover hr { width: 50%; margin: 15px auto; margin-top: 8px } .more_p { -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); -webkit-transition: transform 0.2s linear, box-shadow 0.2s linear; -moz-transition: transform 0.2s linear, box-shadow 0.2s linear; -ms-transition: transform 0.2s linear, box-shadow 0.2s linear; -o-transition: transform 0.2s linear, box-shadow 0.2s linear; transition: transform 0.2s linear, box-shadow 0.2s linear; margin: 0 0 15px } .more_p:hover { -webkit-box-shadow: 0 17px 25px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 17px 25px rgba(0, 0, 0, 0.1); box-shadow: 0 17px 25px rgba(0, 0, 0, 0.1); -webkit-transform: translateY(-2px); -moz-transform: translateY(-2px); -ms-transform: translateY(-2px); -o-transform: translateY(-2px); transform: translateY(-2px); } .btn-view_more { color: #222; padding: 10px 20px; border-radius: 0; border: 1px solid transparent; background: #F7F7F7; margin: 20px 0; transition: transform 0.2s linear, box-shadow 0.2s linear; } .btn-view_more:hover { background-color: #666666; color: #fff; transition: transform 0.2s linear, box-shadow 0.2s linear; }

Related: See More


Questions / Comments: