<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <h1>Ravi Singh</h1> <div class="hls_sol"> <ul> <li> <img src="https://picsum.photos/600/700/?random" alt=""> <div class="hls_sol_data"> <h3>Casual</h3> <div class="hls_data"> <a href="https://500px.com/ravi7284007" target="_blank" class="hls_title">Ravi On 500PX</a> <a href="#https://www.facebook.com/ravi7284007" class="btn btn-pro" target="_blank"> Facebook</a> </div> </div> </li> <li> <img src="https://picsum.photos/600/800/?random" alt=""> <div class="hls_sol_data"> <h3>Street</h3> <div class="hls_data"> <a href="https://500px.com/ravi7284007" target="_blank" class="hls_title">Ravi On 500PX</a> <a href="https://www.facebook.com/ravi7284007" class="btn btn-pro" target="_blank"> Facebook</a> </div> </div> </li> <li> <img src="https://picsum.photos/600/750/?random" alt=""> <div class="hls_sol_data"> <h3>Dapper</h3> <div class="hls_data"> <a href="https://500px.com/ravi7284007" target="_blank" class="hls_title">Ravi On 500PX</a> <a href="https://www.facebook.com/ravi7284007" class="btn btn-pro" target="_blank"> Facebook</a> </div> </div> </li> <li> <img src="https://picsum.photos/600/710/?random" alt=""> <div class="hls_sol_data"> <h3>Minimal</h3> <div class="hls_data"> <a href="https://500px.com/ravi7284007" target="_blank" class="hls_title">Ravi On 500PX</a> <a href="https://www.facebook.com/ravi7284007" class="btn btn-pro" target="_blank"> Facebook</a> </div> </div> </li> </ul> </div>

body{ min-height:1500px; background:url(https://img4.goodfon.com/original/1920x1080/3/bb/iron-man-art-vector-art-marvel-minimal-avengers-superheroes.jpg) fixed; background-size:cover;} img { max-width: 100%; height: auto; } ul li { list-style: none } a, a:hover { text-decoration: none; box-shadow: none; outline: none; -moz-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; -webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in; } h1{ text-align:center; margin:30px 0; color:#fff;} .hls_sol li { width: 25%; max-width: 100%; display: inline-block; float: left; text-align: center; overflow: hidden; position: relative; height: 523px } .hls_sol li img { height: 100%; } .hls_sol ul { padding: 0; display: flow-root; } .hls_sol li:hover img { -moz-transform: scale(1.1); -webkit-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .hls_sol li img { -webkit-transition: transform 0.5s ease; -o-transition: transform 0.5s ease; transition: transform 0.5s ease; } .hls_sol .hls_sol_data { position: absolute; left: 0; right: 0; bottom: 0; top: 0; transition: 0.3s ease-in-out; background: rgba(0,0,0,0.28); visibility: hidden } .hls_sol ul li:hover .hls_sol_data { background: rgba(255,0,4,0.46); transition: 0.3s ease-in-out; visibility: visible } .hls_data { position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 20px; } .hls_data a { display: block; } .hls_title { text-align: right; font-size: 22px; border-bottom: 2px solid blue; padding: 10px 0; margin: 10px 0; color: #fff; } .hls_title:hover { color: #fff; } .hls_sol_data h3 { color: #fff; transition: 0.5s } .hls_sol_data:hover h3 { transition: 0.5s ease; margin-top: 100px; } .btn-pro { border-radius: 0; color: #222; background: #fff; display: inline-block !important; float: right; } .btn-pro:hover { color: #fff; background: #222; } .sec_title { text-align: center; margin: 30px 0 30px; } .hls_data { left: unset; right: -310px; transition: 1s ease } .hls_sol_data:hover .hls_data { left: 0; right: 0; transition: 1s ease }