<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <title>Hello, world!</title>
</head>

<body>

  <div class="container">
    <div class="row row-cols-2 row-cols-lg-4 g-1 g-lg-2">
      <div class="col">
        <div class="tile"> <a href="#">
          <div class="position-relative"><img class="img-fluid w-100" src="https://source.unsplash.com/xzikohlx4jY/600x600" alt="">
            <div class="position-absolute bottom-0 start-50 translate-middle-x bg-white text-black text-center m-2 py-1">
              Baseball
            </div>
          </div>
          </a> </div>
      </div>
      <div class="col">
        <div class="tile"> <a href="#">
          <div class="position-relative"><img class="img-fluid w-100" src="https://source.unsplash.com/M5YKACTmdpo/600x600" alt="">
            <div class="position-absolute bottom-0 start-50 translate-middle-x bg-white text-black text-center m-2 py-1">
              Basketball
            </div>
          </div>
          </a> </div>
      </div>
      <div class="col">
        <div class="tile"> <a href="#">
          <div class="position-relative"><img class="img-fluid w-100" src="https://source.unsplash.com/AeUZfT1uzpo/600x600" alt="">
            <div class="position-absolute bottom-0 start-50 translate-middle-x bg-white text-black text-center m-2 py-1">
              Eishockey
            </div>
          </div>
          </a> </div>
      </div>
      <div class="col">
        <div class="tile"> <a href="#">
          <div class="position-relative"><img class="img-fluid w-100" src="https://source.unsplash.com/UjCvO-LzKpM/600x600" alt="">
            <div class="position-absolute bottom-0 start-50 translate-middle-x bg-white text-black text-center m-2 py-1">
              Football
            </div>
          </div>
          </a> </div>
      </div>
      <div class="col">
        <div class="tile"> <a href="#">
          <div class="position-relative"><img class="img-fluid w-100" src="https://source.unsplash.com/V9vEuDmbyVI/600x600" alt="">
            <div class="position-absolute bottom-0 start-50 translate-middle-x bg-white text-black text-center m-2 py-1">
              Fussball
            </div>
          </div>
          </a> </div>
      </div>
      <div class="col">
        <div class="tile"> <a href="#">
          <div class="position-relative"><img class="img-fluid w-100" src="https://source.unsplash.com/phU8NHF85rU/600x600" alt="">
            <div class="position-absolute bottom-0 start-50 translate-middle-x bg-white text-black text-center m-2 py-1">
              Handball
            </div>
          </div>
          </a> </div>
      </div>
    </div>
  </div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
.tile img {
     background-color: #cccccc;
     background-size: cover;
     filter: grayscale(100%);
}

.tile:hover img { 
    filter: grayscale(0%);
    transition: all 2s ease;
    -webkit-transition: all .5s ease;
	filter: blur(0);
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.