<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://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous"> <div class="container"> <div class="row"> <div class="col-md-4 col-sm-6"> <div class="boxing"> <img class="img-responsive" src="https://img-s1.onedio.com/id-54c6b5e2c94e49b748a0e97e/rev-0/w-635/listing/f-jpg-webp/s-fbf17e1da9eeb5220adf64301c400d788d45888c.webp" alt=""> <div class="box-content"> <div class="content"> <h3 class="title">Hale Nur Çalışkan</h3> <span class="post">Front End Developer</span> <ul class="icon"> <li><a href="#"><i class="fa fa-search"></i></a></li> <li><a href="#"><i class="fa fa-link"></i></a></li> </ul> </div> </div> </div> </div> <div class="col-md-4 col-sm-6"> <div class="boxing"> <img class="img-responsive" src="https://img-s1.onedio.com/id-54c6b5e2c94e49b748a0e97e/rev-0/w-635/listing/f-jpg-webp/s-fbf17e1da9eeb5220adf64301c400d788d45888c.webp" alt=""> <div class="box-content"> <div class="content"> <h3 class="title">Hale Nur Çalışkan</h3> <span class="post">Front End Developer</span> <ul class="icon"> <li><a href="#"><i class="fa fa-search"></i></a></li> <li><a href="#"><i class="fa fa-link"></i></a></li> </ul> </div> </div> </div> </div> <div class="col-md-4 col-sm-6"> <div class="boxing"> <img class="img-responsive" src="https://img-s1.onedio.com/id-54c6b5e2c94e49b748a0e97e/rev-0/w-635/listing/f-jpg-webp/s-fbf17e1da9eeb5220adf64301c400d788d45888c.webp" alt=""> <div class="box-content"> <div class="content"> <h3 class="title">Hale Nur Çalışkan</h3> <span class="post">Front End Developer</span> <ul class="icon"> <li><a href="#"><i class="fa fa-search"></i></a></li> <li><a href="#"><i class="fa fa-link"></i></a></li> </ul> </div> </div> </div> </div> </div> <div class="row"> <div class="col-md-4 col-sm-6"> <div class="boxing"> <img class="img-responsive" src="https://img-s1.onedio.com/id-54c6b5e2c94e49b748a0e97e/rev-0/w-635/listing/f-jpg-webp/s-fbf17e1da9eeb5220adf64301c400d788d45888c.webp" alt=""> <div class="box-content"> <div class="content"> <h3 class="title">Hale Nur Çalışkan</h3> <span class="post">Front End Developer</span> <ul class="icon"> <li><a href="#"><i class="fa fa-search"></i></a></li> <li><a href="#"><i class="fa fa-link"></i></a></li> </ul> </div> </div> </div> </div> <div class="col-md-4 col-sm-6"> <div class="boxing"> <img class="img-responsive" src="https://img-s1.onedio.com/id-54c6b5e2c94e49b748a0e97e/rev-0/w-635/listing/f-jpg-webp/s-fbf17e1da9eeb5220adf64301c400d788d45888c.webp" alt=""> <div class="box-content"> <div class="content"> <h3 class="title">Hale Nur Çalışkan</h3> <span class="post">Front End Developer</span> <ul class="icon"> <li><a href="#"><i class="fa fa-search"></i></a></li> <li><a href="#"><i class="fa fa-link"></i></a></li> </ul> </div> </div> </div> </div> <div class="col-md-4 col-sm-6"> <div class="boxing"> <img class="img-responsive" src="https://img-s1.onedio.com/id-54c6b5e2c94e49b748a0e97e/rev-0/w-635/listing/f-jpg-webp/s-fbf17e1da9eeb5220adf64301c400d788d45888c.webp" alt=""> <div class="box-content"> <div class="content"> <h3 class="title">Hale Nur Çalışkan</h3> <span class="post">Front End Developer</span> <ul class="icon"> <li><a href="#"><i class="fa fa-search"></i></a></li> <li><a href="#"><i class="fa fa-link"></i></a></li> </ul> </div> </div> </div> </div> </div> <div class="row"> <div class="col-md-4 col-sm-6"> <div class="boxing"> <img class="img-responsive" src="https://img-s1.onedio.com/id-54c6b5e2c94e49b748a0e97e/rev-0/w-635/listing/f-jpg-webp/s-fbf17e1da9eeb5220adf64301c400d788d45888c.webp" alt=""> <div class="box-content"> <div class="content"> <h3 class="title">Hale Nur Çalışkan</h3> <span class="post">Front End Developer</span> <ul class="icon"> <li><a href="#"><i class="fa fa-search"></i></a></li> <li><a href="#"><i class="fa fa-link"></i></a></li> </ul> </div> </div> </div> </div> <div class="col-md-4 col-sm-6"> <div class="boxing"> <img class="img-responsive" src="https://img-s1.onedio.com/id-54c6b5e2c94e49b748a0e97e/rev-0/w-635/listing/f-jpg-webp/s-fbf17e1da9eeb5220adf64301c400d788d45888c.webp" alt=""> <div class="box-content"> <div class="content"> <h3 class="title">Hale Nur Çalışkan</h3> <span class="post">Front End Developer</span> <ul class="icon"> <li><a href="#"><i class="fa fa-search"></i></a></li> <li><a href="#"><i class="fa fa-link"></i></a></li> </ul> </div> </div> </div> </div> <div class="col-md-4 col-sm-6"> <div class="boxing"> <img class="img-responsive" src="https://img-s1.onedio.com/id-54c6b5e2c94e49b748a0e97e/rev-0/w-635/listing/f-jpg-webp/s-fbf17e1da9eeb5220adf64301c400d788d45888c.webp" alt=""> <div class="box-content"> <div class="content"> <h3 class="title">Hale Nur Çalışkan</h3> <span class="post">Front End Developer</span> <ul class="icon"> <li><a href="#"><i class="fa fa-search"></i></a></li> <li><a href="#"><i class="fa fa-link"></i></a></li> </ul> </div> </div> </div> </div> </div> </div>

.boxing{ overflow: hidden; position: relative; } .boxing:before{ content: ''; background-color: rgba(255,255,255,0.8); border-radius:5px; box-shadow:0 2px 5px #000; opacity: 0; position: absolute; left: 0; right: 0; bottom: 0; top: 0; z-index: 1; transform: rotateY(90deg) translate(50%, 0) scale(0.5); -webkit-transform: rotateY(90deg) translate(50%, 0) scale(0.5); -moz-transform: rotateY(90deg) translate(50%, 0) scale(0.5); -ms-transform: rotateY(90deg) translate(50%, 0) scale(0.5); -o-transform: rotateY(90deg) translate(50%, 0) scale(0.5); transition: 1s ease; } .boxing:hover:before{ left: 15px; right: 15px; bottom: 15px; top: 15px; opacity: 1; animation:bounce-left 1s ease-in forwards; } .boxing img{ width: 100%; height: auto; transition: all 0.3s ease 0s; } .boxing:hover img{ transform: scale(1.5); } .boxing .box-content{ color: #fff; text-align: center; width: 100%; height: 100%; transform:translateX(-50%) translateY(-50%) scale(1); position: absolute; left: 50%; top: 50%; z-index: 2; transition:all 0.3s ease 0.5s; } .boxing .content{ opacity: 0; transform: translateX(-50%) translateY(-50%); position: absolute; left: 50%; top: 50%; z-index: 2; transition: all 0.3s ease 0s; padding: 0; width: 90%; } .boxing:hover .content{ opacity: 1; } .boxing .title{ color: #000; font-size: 20px; font-weight: 600; text-transform: uppercase; transform: translateY(-500px); opacity: 0; transition:all 0.8s ease 0.3s; } .boxing .post{ color: #000; font-size:15px; font-weight: 500; letter-spacing: 1px; text-transform: capitalize; display: inline-block; margin-bottom: 10px; opacity: 0; transform:translateY(-500px); transition:all 0.8s ease 0.15s; } .boxing:hover .title, .boxing:hover .post{ opacity: 1; transform:translateY(0); } .boxing .icon{ list-style: none; text-align: center; padding: 0; margin: 0; } .boxing .icon li{ margin:0 4px; opacity: 0; display: inline-block; transform: translateY(-200px); transition: all 0.8s ease 0s; } .boxing .icon li:nth-child(2){ transition-delay: 0.1s; } .boxing:hover .icon li{ opacity: 1; transform: translateY(0); } .boxing .icon li a{ color: #000; background-color: #ddd; font-size: 18px; line-height: 33px; height: 35px; width: 35px; border: 2px solid #fff; border-radius: 50%; display: block; transition: all 0.3s ease 0s; } .boxing .icon li a:hover{ color: #fff; background-color: #c00; } @keyframes bounce-left{ 25%,50%,75%,100%{ transform:translateX(0); } 40%{ transform:translateX(30px); } 70%{ transform:translateX(15px); } 90%{ transform:translateX(5px); } } @media only screen and (max-width:990px){ .box{ margin-bottom: 30px; } } @media only screen and (max-width:479px){ .box .title{ font-size: 18px; } }