"hover effect with animation honer animation"
Bootstrap 4.1.1 Snippet by ishu511

<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*/

Related: See More


Questions / Comments: