Wie kann man Bilder und Hintergrundbilder beim Hover zoomen

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>Bewegen Sie mit der Maus über die Bilder, um den Effekt zu sehen.</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>