JSFiddle - React, Tailwind, and code Playground

by gothic

HTML

<header class="header">
      <h1 class="header-title">Image Zoom on Hover</h1>
    </header>

    <section class="wrapper">
      <a href="#" class="tile">
        <img src="https://media.timeout.com/images/101602611/image.jpg" alt="" class="tile-media">
        <span class="tile-content">Los Angeles</span>
      </a>

      <a href="#" class="tile">
        <img src="http://s1.it.atcdn.net/wp-content/uploads/2015/08/2-London.jpg" alt="" class="tile-media">
        <span class="tile-content">London</span>
      </a>

      <a href="#" class="tile">
        <img src="https://media.timeout.com/images/101484105/image.jpg" alt="" class="tile-media">
        <span class="tile-content">New York</span>
      </a>

      <a href="#" class="tile">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/00/Hollywood_Sign.jpg/1280px-Hollywood_Sign.jpg" alt=""
          class="tile-media">
        <span class="tile-content">Hollywood</span>
      </a>

      <a href="#" class="tile">
        <img src="http://www.travelandleisure.com/sites/default/files/styles/tnl_redesign_article_landing_page/public/1453920892/DUBAI-554088081-ABOVE0116.jpg?itok=dcoZnCrc"
          alt="" class="tile-media">
        <span class="tile-content">Dubai</span>
      </a>

      <a href="#" class="tile">
        <img src="http://blog.whitepages.com/wp-content/uploads/2015/04/san-franc.jpg" alt="" class="tile-media">
        <span class="tile-content">San Francisco</span>
      </a>
    </section>

CSS

.tile {
        width: 100%;
        height: 300px;
        margin: 0.5rem auto;
        position: relative;
        display: block;
        overflow: hidden;
        float: left;
       
      }
       .title::after {
          content: "";
          position: absolute;
          background-color: rgba(52, 73, 94, 0.75);
          width: 100%;
          height: 100%;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          visibility: hidden;
          opacity: 0;
          transition: visibility 0.5s, opacity 0.5s;
        }
      
      .tile:hover::after,
      .tile:focus::after {
        visibility: visible;
        opacity: 1;
      }
      
      .tile-media {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.5s;
        transform: scale(1);
        backface-visibility: hidden;
      }
      
      .tile:hover .tile-media,
      .tile:focus .tile-media {
        transform: scale(1.2);
      }
      
      .tile-content {
        top: 50%;
        right: 0;
        left: 0;
        position: absolute;
        z-index: 1;
        visibility: hidden;
        opacity: 0;
        color: #fff;
        font-size: 3rem;
        transition: visibility 0.5s, opacity 0.5s;
        transform: translateY(-50%);
        backface-visibility: hidden;
        text-align: center;
      }
      
      .tile:hover .tile-content,
      .tile:focus .tile-content {
        visibility: visible;
        opacity: 1;
      }
      
      @media screen and (min-width: 64em) {
        .tile {
          width: calc(50% - 2rem);
          margin: 1rem;
        }
      }