An example of how to zoom images and background images on hover?

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <style>
      html,
      body {
        margin: 0px;
        padding: 0px;
      }
      .wrapper {
        padding: 50px 50px;
        max-width: 1200px;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
      }
      .container {
        width: 45%;
        margin: 20px;
        height: 300px;
        border: 3px solid #eee;
        overflow: hidden;
        position: relative;
        float: left;
        display: inline-block;
        cursor: pointer;
      }
      .child {
        height: 100%;
        width: 100%;
        background-size: cover;
        background-repeat: no-repeat;
        -webkit-transition: all .5s;
        -moz-transition: all .5s;
        -o-transition: all .5s;
        transition: all .5s;
      }
      .bg-one {
        background-image: url(http://w3docs.com/uploads/media/default/0001/03/66cf5094908491e69d8187bcf934050a4800b37f.jpeg);
      }
      .bg-two {
        background-image: url(https://w3docs.com/uploads/media/default/0001/03/5bfad15a7fd24d448a48605baf52655a5bbe5a71.jpeg);
      }
      span {
        display: none;
        font-size: 35px;
        color: #ffffff !important;
        font-family: sans-serif;
        text-align: center;
        margin: auto;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        height: 50px;
        cursor: pointer;
        text-decoration: none;
      }
      .container:hover .child,
      .container:focus .child {
        -ms-transform: scale(1.2);
        -moz-transform: scale(1.2);
        -webkit-transform: scale(1.2);
        -o-transform: scale(1.2);
        transform: scale(1.2);
      }
      .container:hover .child:before,
      .container:focus .child:before {
        display: block;
      }
      .container:hover span,
      .container:focus span {
        display: block;
      }
      .child:before {
        content: "";
        display: none;
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-color: rgba(52, 73, 94, 0.75);
      }
      @media screen and (max-width: 960px) {
        .container {
          width: 100%;
          margin: 20px 0;
        }
        .wrapper {
          padding: 20px;
        }
      }
    </style>
  </head>
  <body>
    <p>Hover over the images to see the effect.</p>
    <div class="wrapper">
      <div class="container">
        <div class="child bg-one">
          <span>London</span>
        </div>
      </div>
      <div class="container">
        <div class="child bg-two">
          <span>New York</span>
        </div>
      </div>
    </div>
  </body>
</html>