<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 ---------->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<section id="first">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="fisrt">
<img src="https://cdn.pixabay.com/photo/2015/06/22/08/40/child-817373_960_720.jpg">
<div class="overlay">
<div class="text">
<h3>Lorem Ipsum</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<div class="social-icon">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="fisrt">
<img src="https://cdn.pixabay.com/photo/2015/06/22/08/37/children-817365_960_720.jpg">
<div class="overlay">
<div class="text">
<h3>Lorem Ipsum</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<div class="social-icon">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="fisrt">
<img src="https://cdn.pixabay.com/photo/2016/04/14/08/40/newborn-1328454_960_720.jpg">
<div class="overlay">
<div class="text">
<h3>Lorem Ipsum</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<div class="social-icon">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
@import url('https://fonts.googleapis.com/css?family=Courgette');
body{font-family: 'Courgette', cursive;
background: -moz-linear-gradient(230deg, rgba(255,0,255,1) 0%, rgba(0,255,255,1) 100%); /* ff3.6+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, rgba(0,255,255,1)), color-stop(100%, rgba(255,0,255,1))); /* safari4+,chrome */
background: -webkit-linear-gradient(230deg, rgba(255,0,255,1) 0%, rgba(0,255,255,1) 100%); /* safari5.1+,chrome10+ */
background: -o-linear-gradient(230deg, rgba(255,0,255,1) 0%, rgba(0,255,255,1) 100%); /* opera 11.10+ */
background: -ms-linear-gradient(230deg, rgba(255,0,255,1) 0%, rgba(0,255,255,1) 100%); /* ie10+ */
background: linear-gradient(220deg, rgba(255,0,255,1) 0%, rgba(0,255,255,1) 100%); /* w3c */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff00ff', endColorstr='#00ffff',GradientType=0 ); /* ie6-9 */
background-repeat:no-repeat;
}
.text {
position: absolute;
top: 2%;
} /*/////////////////////////////////first*/
.fisrt {
display: block;
overflow: hidden;position: relative;
}
.fisrt img {
width: 100%;
height: auto;
}
#first {
margin-top: 37px;
}
.overlay {
background: rgba(0,0,0,0.4);
text-align: center;
position: absolute;
top: 0;
width: 100%;
height: 1000%;
transition: all ease-in 0.5s;
opacity: 0;
}
.text h3 {
color: white;transition: all ease-out 0.3s;
margin-top: 0px;
}
.text p {
color: white;
margin-left: -758px;
transition: all ease-in 0.5s;
}
.social-icon {
font-size: 16px; margin-right:-450px;transition: all ease-out 0.9s;
}
.fab.fa-facebook-f, .fab.fa-twitter, .fab.fa-instagram {
background: #4867AA;
color: white;
border-radius: 1000%;
width: 30px;
height: 30px;
padding: 7px;
}
.fab.fa-instagram {background: #EE514C;}
.fab.fa-twitter{background: #55ADED;}
.fisrt:hover .overlay {
opacity: 1;
transition: all ease-out 0.9s;
}
.fisrt:hover .text h3 {
transition-delay: 0.3s; margin-top:0;;}
.fisrt:hover .text p {
transition-delay: 0.6s; margin-left:0;}
.fisrt:hover .social-icon {
transition-delay: 0.9s; margin-right: 0px;
}
/*/////////////////////////////////second*/
