<link href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.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="container"> <div class="row"> <div class="center"> <div class="col-md-4 col-sm-6"> <div class="box"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQW6U70hzbaSzmwDss2ZYkY55HU3b2eaTRoSNOV07GIghorFLYD"> <div class="box-content"> <div class="content-inner"> <h3 class="title">Williamson</h3> <span class="post">Web 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="box"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ_hXfJAbTl1uJu3Qog4Da4f-AnNJMQZHl9CGNoA-G_y8Fn_8UV"> <div class="box-content"> <div class="content-inner"> <h3 class="title">Kristiana</h3> <span class="post">Web Designer</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> </div>

.box{ text-align: center; overflow: hidden; box-shadow: 0 0 3px rgba(0,0,0,0.3); position: relative; } .box img{ width: 100%; height: auto; } .box .box-content{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; transition: all 0.3s ease 0s; } .box:before, .box:after, .box .box-content:before, .box .box-content:after{ content: ""; height: 25%; background: rgba(0,0,0,0.7); margin: 0 auto; opacity: 0; position: absolute; bottom: 0; left: 0; right: 0; transition: all 0.3s steps(4); } .box:before{ width: 75%; bottom: 0; transition-delay: 0s; } .box:after{ width: 50%; bottom: 25%; transition-delay: 0.1s; } .box .box-content:before{ width: 25%; bottom: 50%; z-index: -1; transition-delay: 0.2s; } .box .box-content:after{ width: 0; bottom: 75%; z-index: -1; transition-delay: 0.3s; } .box:hover:before, .box:hover:after, .box:hover .box-content:before, .box:hover .box-content:after{ width: 100%; opacity: 1; } .box .content-inner{ width: 100%; margin: 0 auto; opacity: 0; position: absolute; top: 50%; left: 0; transform: translateY(-50%); transition: all 0.3s ease 0.2s; } .box:hover .content-inner{ opacity: 1; } .box .title{ font-size: 25px; font-weight: 700; color: #fe338a; letter-spacing: 1px; margin: 0 0 10px 0; transition: all 0.3s ease 0s; } .box .post{ display: inline-block; font-size: 16px; font-style: italic; color: #fff; margin: 0 0 15px 0; } .box .icon{ padding: 0; margin: 0; list-style: none; } .box .icon li{ display: inline-block; margin-right: 5px; opacity: 0; transform: translateY(50px); transition: all 0.3s ease 0s; } .box:hover .icon li{ opacity: 1; transform: translateY(0); } .box:hover .icon li:nth-child(2){ transition-delay: 0.1s; } .box .icon li a{ display: block; width: 40px; height: 40px; line-height: 40px; background: #fff; border-radius: 10px 20px 20px 10px; font-size: 18px; color: #000; overflow: hidden; z-index: 1; position: relative; } .box .icon li a:hover{ color: #fff; box-shadow: 0 0 5px #fe338a; } .box .icon li a:after{ content: ""; width: 100%; height: 100%; background: #fe338a; position: absolute; top: 0; left: -50px; z-index: -1; transition: all 0.3s ease 0s; } .center{ width:800px; display: inline-table; } .icon li a:hover:after{ left: 0; } @media only screen and (max-width:990px){ .box{ margin-bottom: 30px; }