Balaji

by Shankar

HTML

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="/docs/4.0/assets/img/favicons/favicon.ico">

    <title>Landing Template</title>

    <link rel="canonical" href="https://getbootstrap.com/docs/4.0/examples/album/">

    <!-- Bootstrap core CSS -->
    <link href="https://getbootstrap.com/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <style>
.box-shadow{box-shadow:0 .25rem .75rem rgba(0, 0, 0, .05);}
.card{border:1px solid rgba(0,0,0,.195);}
.card-img-top{height:270px !important;}
.cardWrapper{margin:10px 0;}
 .tile-wrapper{margin:0;padding:0;overflow:hidden;position:relative;width:100%;height:100%;}
.new-arrivals-link{line-height:0;}
.new-arrivals-link img{-webkit-transition:all 1s ease;-moz-transition:all 1s ease;-ms-transition:all 1s ease;-o-transition:all 1s ease;transition:all 1s ease;-webkit-transform:scale(1);transform:scale(1);-webkit-transition:.3s ease-in-out;transition:.3s ease-in-out;width:100%;}
.new-arrivals-link:hover img{-webkit-transform:scale(1.25);-moz-transform:scale(1.25);-ms-transform:scale(1.25);-o-transform:scale(1.25);transform:scale(1.25);}
.new-arrivals-link img:hover{opacity:0.8;}
.tile-wrapper .text-overlay{position:absolute;width:100%;height:100%;overflow:auto;margin:auto;top:0;left:0;bottom:0;right:0;text-align:center;}
.tile-wrapper .text-overlay h2{color:#000;font-size:14px;line-height:0;margin:10% 0 0 40%;}
.tile-wrapper .text-overlay p{color:#000;font-size:28px;margin:6% 0 0 40%;}
      </style>
  </head>

  <body>
   <main role="main">
      <div class="album py-5 bg-light">
         <div class="container">
            <div class="row">
               <div class="col-md-4 cardWrapper">
                  <div class="tile-wrapper">
                     <a...