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