<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 ----------> <div class="container"> <div class="row"> <div class="row justify-content-center"> <div class="col-7"> <div class="uploads-box"> <form method="post" action="#" id="#"> <div class="form-group files"> <label>Upload Your File </label> <input type="file" class="form-control" multiple=""> </div> </form> <div class="upload-photos"> <div class="row"> <div class="col-4"> <div class="img-l-container"> <span>1</span> <img class="img-l img-responsive img-fluid" src="https://www.fashionunlock.com/wp-content/uploads/2021/01/F.jpeg"> <div class="img-action"> <div class="img-action-bottom"> <a class="btn btn-outline-light btn-block" href="#">Edit</a> <a class="btn btn-outline-light btn-block" href="#">Remove</a></div> </div> </div> </div> <div class="col-8"> <div class="row"> <div class="col-3 pl-0 mb-3"> <div class="img-s-container"> <span>2</span> <img class="img-s img-fluid img-responsive" src="https://www.fashionunlock.com/wp-content/uploads/2021/01/F.jpeg"> <div class="img-action"> <div class="img-action-bottom"> <a class="btn btn-outline-light btn-block" href="#">Edit</a> <a class="btn btn-outline-light btn-block" href="#">Delete</a> <a class="btn btn-outline-light btn-block" href="#">Set Main</a></div> </div> </div> </div> <div class="col-3 pl-0 mb-3"> <div class="img-s-container"> <span>3</span> <img class="img-s img-fluid img-responsive" src="https://www.fashionunlock.com/wp-content/uploads/2021/01/F.jpeg"> <div class="img-action"> <div class="img-action-bottom"> <a class="btn btn-outline-light btn-block" href="#">Edit</a> <a class="btn btn-outline-light btn-block" href="#">Delete</a> <a class="btn btn-outline-light btn-block" href="#">Set Main</a></div> </div> </div> </div> <div class="col-3 pl-0 mb-3"> <div class="img-s-container"> <span>4</span> <img class="img-s img-fluid" src="https://www.fashionunlock.com/wp-content/uploads/2021/01/F.jpeg"> <div class="img-action"> <div class="img-action-bottom"> <a class="btn btn-outline-light btn-block" href="#">Edit</a> <a class="btn btn-outline-light btn-block" href="#">Delete</a> <a class="btn btn-outline-light btn-block" href="#">Set Main</a></div> </div> </div> </div> <div class="col-3 pl-0 mb-3"> <div class="img-s-container"> <span>5</span> <img class="img-s img-fluid" src="https://www.fashionunlock.com/wp-content/uploads/2021/01/F.jpeg"> <div class="img-action"> <div class="img-action-bottom"> <a class="btn btn-outline-light btn-block" href="#">Edit</a> <a class="btn btn-outline-light btn-block" href="#">Delete</a> <a class="btn btn-outline-light btn-block" href="#">Set Main</a></div> </div> </div> </div> </div> <div class="row"> <div class="col-3 pl-0"> <div class="img-s-container"> <span>5</span> <img class="img-s img-fluid img-responsive" src="https://www.fashionunlock.com/wp-content/uploads/2021/01/F.jpeg"> <div class="img-action"> <div class="img-action-bottom"> <a class="btn btn-outline-light btn-block" href="#">Edit</a> <a class="btn btn-outline-light btn-block" href="#">Delete</a> <a class="btn btn-outline-light btn-block" href="#">Set Main</a></div> </div> </div> </div> <div class="col-3 pl-0"> <div class="img-s-container"> <span>6</span> <img class="img-s img-fluid img-responsive" src="https://www.fashionunlock.com/wp-content/uploads/2021/01/F.jpeg"> <div class="img-action"> <div class="img-action-bottom"> <a class="btn btn-outline-light btn-block" href="#">Edit</a> <a class="btn btn-outline-light btn-block" href="#">Delete</a> <a class="btn btn-outline-light btn-block" href="#">Set Main</a></div> </div> </div> </div> <div class="col-3 pl-0"> <div class="img-s-container"> <img class="img-s img-fluid" src="https://st.depositphotos.com/1318325/2442/i/950/depositphotos_24421711-stock-photo-silhouette-of-young-sexy-woman.jpg"> </div> </div> <div class="col-3 pl-0"> <div class="img-blank-container"> <p>Increase image limit</p> <div class="img-action-bottom"> <a class="btn btn-outline-light btn-block" href="#">+ Add More</a> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>

.files input { outline: 2px dashed #cecece; outline-offset: 0px; -webkit-transition: outline-offset .15s ease-in-out, background-color .15s linear; transition: outline-offset .15s ease-in-out, background-color .15s linear; padding: 90px 0px 85px 35%; text-align: center !important; margin: 0; width: 100% !important; } .files input:focus{ outline: 2px dashed #92b0b3; outline-offset: 0px; -webkit-transition: outline-offset .15s ease-in-out, background-color .15s linear; transition: outline-offset .15s ease-in-out, background-color .15s linear; border:1px solid #92b0b3; } .files{ position:relative} .files:after { pointer-events: none; position: absolute; top: 60px; left: 0; width: 50px; right: 0; height: 56px; content: ""; background-image: url(https://image.flaticon.com/icons/png/128/109/109612.png); display: block; margin: 0 auto; background-size: 100%; background-repeat: no-repeat; } .color input{ background-color:#f1f1f1;} .files:before { position: absolute; bottom: 0px; left: 0; pointer-events: none; width: 100%; right: 0; height: 57px; content: " or drag it here. "; display: block; margin: 0 auto; font-weight: 600; text-transform: capitalize; text-align: center; } .uploads-box { border: 0px solid #002768; padding: 15px; margin-bottom: 30px; box-shadow: 0px 1px 5px 1px #ccc; border-radius: 10px; } .img-l-container span, .img-s-container span { position: absolute; background-color: #fff; padding: 0px 5px; font-size: 11px; top: 6px; left: 20px; border-radius: 3px; } .img-s-container span { left: 6px; } .img-action { position: absolute; display: flex; background-color: rgb(49 47 47 / 75%); top: 0; width: 87%; height: -webkit-fill-available; border-radius: 3px; justify-content: flex-end; flex-direction: column; cursor: pointer; } .img-l-container img { width: 100%; height: 297px; border-radius: 3px; } .img-s-container img { width: 100%; height: 140px; border-radius: 3px; } .img-action { padding: 10px; } .img-action .btn { color: #fff; padding: 5px; font-size: 10px; } .img-action .btn:hover { color: #000; } .img-action { padding: 10px; opacity: 0; } .img-l-container:hover .img-action, .img-s-container:hover .img-action { opacity: 1; transition: all 1s; } .img-blank-container { background-color: #2d2f2c; height: 140px; width: 100%; padding: 10px; color: #fff; } .img-blank-container p { font-size: 13px; text-align: center; line-height: 18px; margin-top: 20px; text-transform: uppercase; } .img-blank-container .btn { font-size: 10px; padding: 5px; color: #fff; } .img-blank-container .btn:hover { color: #000; }