<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-secondary p-0"> <div class="col-12 text-center mx-auto p-5"> <div class="demo-title"> Bordered Image Content on Hover </div> <div class="credit-title"> Designed by <a href="https://bootsnipp.com/sarwal" target="_blank" class="text-light">sarwal</a>. Inspired by <a href="https://bootsnipp.com/prakash27dec" target="_blank" class="text-light">prakash27dec</a>. </div> </div> </div> <div class="row bg-dark p-1"> <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12 mx-auto p-1"> <div class="hover-box"> <img src="https://cdn.pixabay.com/photo/2017/06/17/12/59/luxury-home-2412145_960_720.jpg"> <div class="hover-box-content"> <div class="hover-box-title"> Lorem Ipsum </div> <div class="hover-box-desc"> Lorem ipsum dolor sit amet. </div> </div> </div> </div> <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12 mx-auto p-1"> <div class="hover-box"> <img src="https://cdn.pixabay.com/photo/2016/08/16/03/50/exterior-1597098_960_720.jpg"> <div class="hover-box-content"> <div class="hover-box-title"> Lorem Ipsum </div> <div class="hover-box-desc"> Lorem ipsum dolor sit amet. </div> </div> </div> </div> <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12 mx-auto p-1"> <div class="hover-box"> <img src="https://cdn.pixabay.com/photo/2017/06/17/12/59/luxury-home-2412145_960_720.jpg"> <div class="hover-box-content"> <div class="hover-box-title"> Lorem Ipsum </div> <div class="hover-box-desc"> Lorem ipsum dolor sit amet. </div> </div> </div> </div> <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12 mx-auto p-1"> <div class="hover-box"> <img src="https://cdn.pixabay.com/photo/2016/08/16/03/50/exterior-1597098_960_720.jpg"> <div class="hover-box-content"> <div class="hover-box-title"> Lorem Ipsum </div> <div class="hover-box-desc"> Lorem ipsum dolor sit amet. </div> </div> </div> </div> </div> </div>

/* Importing the Font Families used in this Demo */ @import url('https://fonts.googleapis.com/css?family=Playfair+Display:700&display=swap'); @import url('https://fonts.googleapis.com/css?family=Montserrat:500&display=swap'); /* Removable Title at Top of Demo */ .demo-title { font-family: 'Playfair Display', serif; font-weight: normal; font-size: 45px; color: #FFFFFF; } /* Removable Description at Bottom of Demo */ .credit-title { font-family: 'Montserrat', sans-serif; font-weight: normal; font-size: 0.9rem; color: #FFFFFF; } /* Initial Hover Box Setup */ .hover-box { position: relative; overflow: hidden; text-align: center; } /* Initial Setup of the Top and Bottom Borders on Hover */ .hover-box:before { border-top: 1px solid #FFFFFF; border-bottom: 1px solid #FFFFFF; content: ''; z-index: 2; position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; transform: scaleX(0); transition: all 0.5s ease; opacity: 0; } /* Initial Setup of the Left and Right Borders on Hover */ .hover-box:after { border-left: 1px solid #FFFFFF; border-right: 1px solid #FFFFFF; content: ''; z-index: 2; position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; transform: scaleY(0); transition: all 0.5s ease; opacity: 0; } /* Image Sizing Setup */ .hover-box img { width: 100%; height: auto; overflow: hidden; transform: scale(1.1); transition: all 0.5s ease; } /* Initial Setup of Box Content */ .hover-box .hover-box-content { position: absolute; top: 5%; left: 5%; width: 90%; height: 90%; overflow: hidden; transition: all 0.5s ease; opacity: 1; z-index: 2; } /* Initial Setup of Box Content Title */ .hover-box .hover-box-content .hover-box-title { position: absolute; top: 20%; left: 0%; width: 100%; height: auto; font-family: 'Playfair Display', serif; font-weight: normal; font-size: 20px; transition: all 0.5s ease; opacity: 0; color: #FFFFFF; } /* Initial Setup of Box Content Description Paragraphs */ .hover-box .hover-box-content .hover-box-desc { position: absolute; bottom: 20%; left: 0%; width: 100%; height: auto; font-family: 'Montserrat', sans-serif; font-weight: normal; font-size: 0.9rem; transition: all 0.5s ease; opacity: 0; color: #FFFFFF; } /* Hover Effects on Image Styling */ .hover-box:hover img { transform: scale(1); filter: brightness(0.5); } /* Hover Effects to Display the Top and Bottom Borders */ .hover-box:hover:before { transform: scaleX(1); opacity: 1; } /* Hover Effects to Display the Left and Right Borders */ .hover-box:hover:after { transform: scaleY(1); opacity: 1; } /* Hover Effects to Move the Title Position */ .hover-box:hover .hover-box-content .hover-box-title { top: 35%; opacity: 1; } /* Hover Effects to Move the Description Position */ .hover-box:hover .hover-box-content .hover-box-desc { bottom: 35%; opacity: 1; }