<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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 ---------->
<section id="instragram">
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 ">
<div class="instrgream-image">
<img src="https://www.askideas.com/media/07/Beautiful-Cute-Baby-Girl-In-Purple-Dress.jpg">
<div class="overlay">
<div class="overlay-text">
<h4>AYUSH THAKUR</h4>
<p>Himachal pardesh Mandi sarkaghat</p>
<a>thakurayush511@gmail.com</a>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="instragram-2">
<img src="https://www.askideas.com/media/07/Beautiful-Cute-Baby-Girl-In-Purple-Dress.jpg">
<div class="overlay-2">
<div class="overlay-text-2">
<h4>AYUSH THAKUR</h4>
<p>Himachal pardesh Mandi sarkaghat</p>
<a>thakurayush511@gmail.com</a>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="instragram-3">
<img src="https://www.askideas.com/media/07/Beautiful-Cute-Baby-Girl-In-Purple-Dress.jpg">
<div class="overlay-3">
<div class="overlay-text-3">
<h4>AYUSH THAKUR</h4>
<p>Himachal pardesh Mandi sarkaghat</p>
<a>thakurayush511@gmail.com</a>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="instragram-4">
<img src="https://www.askideas.com/media/07/Beautiful-Cute-Baby-Girl-In-Purple-Dress.jpg">
<div class="overlay-4">
<div class="overlay-text-4">
<h4>AYUSH THAKUR</h4>
<p>Himachal pardesh Mandi sarkaghat</p>
<a>thakurayush511@gmail.com</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</section>
/**====================================instreagram===========================================**/
.instrgream-image img ,.instragram-2 img, .instragram-3 img, .instragram-4 img{
width: 100%;
}
#instragram .col-md-3 {
padding: 0;
}
.instrgream-image {
position: relative;
display: block;
overflow: hidden;
}
.overlay {
position: absolute;
top: 100%;
background: rgba(0,0,0,0.8);
width: 100%;
opacity: 0;
height: 100%;
transition: all ease-in-out 0.5s;
display: block;
overflow: hidden;
transition: all ease-in 0.8s;
}
.overlay-text {
position: absolute;
top: 32%;
transform: translatex(5%);
}
.overlay-text h4, .overlay-text-2 h4, .overlay-text-3 h4, .overlay-text-4 h4 {
color: #9E2499;
font-size: 31px;
margin-bottom: 18px;
}
.overlay-text p, .overlay-text-2 p, .overlay-text-3 p, .overlay-text-4 p {
color: #787878;
font-size: 16px;
font-weight: 600;
}
.overlay-text a, .overlay-text-2 a, .overlay-text-3 a, .overlay-text-4 a {
color: #FF5241 !important;
font-size: 14px;
text-transform: uppercase;
margin-top: -7px;
display: block; position: relative;
}
.overlay-text a::after, .overlay-text-2 a::after, .overlay-text-3 a::after, .overlay-text-4 a::after {
position: absolute;
background: #FF5241;
width: 69%;
height: 1px;
content: "";
left: 0;
bottom: -7px;
right: 0;
margin: auto;
}
.instrgream-image:hover .overlay {
opacity: 1;
top: 0;
transition: all ese out 0.5s;
}
.instragram-2 {
position: relative;
display: block;
overflow: hidden;
}
.overlay-2 {
position: absolute;
top: -100%;
background: rgba(0,0,0,0.8);
width: 100%;
height: 100%;
opacity: 0;transition: all ease-in-out 1s !important;
}
.overlay-text-2 {
position: absolute;
top: 50%;
transform: translateX(7%);
}
.instragram-2:hover .overlay-2 {
opacity: 1;
transition: all ease-in 0.5s;
top: 0;
}
.instragram-3 {
position: relative;
display: block;
overflow: hidden;
}
.overlay-3 {
position: absolute;
top: 0;
background: rgba(0,0,0,0.8);
width: 100%;
height: 100%;
left: -100%;
opacity: 0;
}
.instragram-3:hover .overlay-3 {
opacity: 1;
left: 0; transition: all ease-in-out 2s;
}
.overlay-text-3 {
positon: absolute;
top: 48%;
transform: translatex(11%);
}
.instragram-4 {
position: relative;
display: block;
overflow: hidden;
}
.overlay-4 {
position: absolute;
top: 0;
background: rgba(0,0,0,0.8);
width: 100%;
height: 100%; opacity: 0;
right: -100%;transition: all ease-in-out 0.5s;
}
.instragram-4:hover .overlay-4 {
opacity: 1;
right: 0;
transition: all ease-in-out .8s;
}
.overlay-text-4 {
position: absolute;
top: 50%;
transform: translatex(12%);
}
#instragram {
margin-top: 50px;
}
#subscribe {
padding: 68px 0;
}
#subscribe span {
color: #9E2499;font-family: 'Charm', cursive;
}
#subscribe h2 {
font-size: 29px;
text-transform: capitalize;
font-weight: 600;
}
#subscribe input {
padding: 10px 86px;
border: solid 1px #dddddd;
display: inline-block;
margin-left: 0;
}
#subscribe a {
background: #FF5241;
color: white;
text-transform: uppercase;
padding: 11px 11px;
display: ;
display: block;
overflow: hidden;
text-transform: uppercase;
margin-top: -2px;
}
footer {
background: #f7f7f7;
padding: 48px 0;
}
.footer-logo h3 {
color: #9E2499;
text-transform: capitalize;
margin-top: 10px;
margin-bottom: 20px;
