<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-fluid"> <div class="row bg-dark mx-auto p-0"> <div class="col-12 text-center mx-auto p-5"> <div class="title-demo"> Gradient Border over Image </div> <div class="desc-demo"> Created by <a href="https://bootsnipp.com/sarwal" target="_blank" class="text-light">sarwal</a>. Inspired by <a href="https://bootsnipp.com/naimansari" target="_blank" class="text-light">naimansari</a>. Images referenced from <a href="https://www.pixabay.com" target="_blank" class="text-light">pixabay</a>. </div> </div> </div> <div class="row bg-dark mx-auto p-1"> <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12 mx-auto p-1"> <div class="bordered-gradient"> <img src="https://cdn.pixabay.com/photo/2017/12/10/03/18/balcony-3009152_960_720.jpg"> <div class="border-content"> <div class="border-desc"> <a href="#link"> Residential </a> </div> </div> </div> </div> <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12 mx-auto p-1"> <div class="bordered-gradient"> <img src="https://cdn.pixabay.com/photo/2017/12/10/03/18/balcony-3009152_960_720.jpg"> <div class="border-content"> <div class="border-desc"> <a href="#link"> Commercial </a> </div> </div> </div> </div> <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12 mx-auto p-1"> <div class="bordered-gradient"> <img src="https://cdn.pixabay.com/photo/2017/12/10/03/18/balcony-3009152_960_720.jpg"> <div class="border-content"> <div class="border-desc"> <a href="#link"> Exterior </a> </div> </div> </div> </div> <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12 mx-auto p-1"> <div class="bordered-gradient"> <img src="https://cdn.pixabay.com/photo/2017/12/10/03/18/balcony-3009152_960_720.jpg"> <div class="border-content"> <div class="border-desc"> <a href="#link"> Interior </a> </div> </div> </div> </div> </div> </div>

@import url('https://fonts.googleapis.com/css?family=Domine&display=swap'); @import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap'); /* Removable Title at Top of Demo */ .title-demo { font-family: 'Domine', serif; font-weight: normal; font-size: 40px; color: #E9C46A; } /* Removable Description at Top of Demo */ .desc-demo { font-family: 'Montserrat', sans-serif; font-weight: normal; font-size: 16px; color: #CCCCCC; } /* Initial Setup */ .bordered-gradient { background-color: #000000; position: relative; overflow: hidden; text-align: center; } /* Image Setup */ .bordered-gradient img { width: 100%; height: auto; overflow: hidden; opacity: 0.4; transform: scale(1.25); transition: all 0.5s ease; } /* Initial Setup of Interior Content */ .bordered-gradient .border-content { background-image: linear-gradient(to right, #E9C46A 0%, #2A9D8F 100%), linear-gradient(to right, #E9C46A 0%, #2A9D8F 100%); background-size: 100% 2px; background-position: 0 0, 0 100%; background-repeat: no-repeat; border-left: 2px solid #E9C46A; border-right: 2px solid #2A9D8F; width: 90%; height: 90%; position: absolute; top: 5%; left: 5%; } /* Styling of Anchor Tags within Content */ .bordered-gradient .border-content .border-desc a { font-family: 'Domine', serif; font-weight: normal; font-size: 32px; text-transform: uppercase; text-decoration: none; text-align: center; letter-spacing: 2px; color: #FFFFFF !important; position: absolute; top: 45%; left: 0%; width: 100%; height: auto; z-index: 3; opacity: 0; transition: all 0.5s ease; } /* Hover Effects for the Image */ .bordered-gradient:hover img { transform: scale(1); opacity: 0.2; } /* Hover Effects for the Anchor Tag */ .bordered-gradient:hover .border-content .border-desc a { opacity: 1; }