Wie kann man Bilder und Hintergrundbilder beim Hover zoomen

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      h1 {
      margin: 30px 15px 0;
      font-weight: 300;
      }
      h2 {
      margin: 60px 15px 0;
      padding: 0;
      font-weight: 300;
      }
      .column {
      margin: 15px 15px 0;
      padding: 0;
      }
      .column:last-child {
      padding-bottom: 60px;
      }
      .column::after {
      content: '';
      clear: both;
      display: block;
      }
      .column div {
      position: relative;
      float: left;
      width: 300px;
      height: 200px;
      margin: 0 0 0 25px;
      padding: 0;
      }
      .column div {
      margin-left: 0;
      }
      .column div span {
      position: absolute;
      bottom: -20px;
      left: 0;
      z-index: -1;
      display: block;
      width: 300px;
      margin: 0;
      padding: 0;
      color: #444;
      font-size: 18px;
      text-decoration: none;
      text-align: center;
      -webkit-transition: .3s ease-in-out;
      transition: .3s ease-in-out;
      opacity: 0;
      }
      figure {
      width: 300px;
      height: 200px;
      margin: 0;
      padding: 0;
      background: #fff;
      overflow: hidden;
      }
      figure:hover+span {
      bottom: -36px;
      opacity: 1;
      }
      /* Zoom In #1 */
      .hover01 figure img {
      -webkit-transform: scale(1);
      transform: scale(1);
      -webkit-transition: .3s ease-in-out;
      transition: .3s ease-in-out;
      }
      .hover01 figure:hover img {
      -webkit-transform: scale(1.3);
      transform: scale(1.3);
      }
      /* Zoom In #2 */
      .hover02 figure img {
      width: 300px;
      height: auto;
      -webkit-transition: .3s ease-in-out;
      transition: .3s ease-in-out;
      }
      .hover02 figure:hover img {
      width: 350px;
      }
      /* Zoom Out #1 */
      .hover03 figure img {
      -webkit-transform: scale(1.5);
      transform: scale(1.5);
      -webkit-transition: .3s ease-in-out;
      transition: .3s ease-in-out;
      }
      .hover03 figure:hover img {
      -webkit-transform: scale(1);
      transform: scale(1);
      }
      /* Zoom Out #2 */
      .hover04 figure img {
      width: 400px;
      height: auto;
      -webkit-transition: .3s ease-in-out;
      transition: .3s ease-in-out;
      }
      .hover04 figure:hover img {
      width: 300px;
      }
      /* Slide */
      .hover05 figure img {
      margin-left: 30px;
      -webkit-transform: scale(1.5);
      transform: scale(1.5);
      -webkit-transition: .3s ease-in-out;
      transition: .3s ease-in-out;
      }
      .hover05 figure:hover img {
      margin-left: 0;
      }
      /* Rotate */
      .hover06 figure img {
      -webkit-transform: rotate(15deg) scale(1.4);
      transform: rotate(15deg) scale(1.4);
      -webkit-transition: .3s ease-in-out;
      transition: .3s ease-in-out;
      }
      .hover06 figure:hover img {
      -webkit-transform: rotate(0) scale(1);
      transform: rotate(0) scale(1);
      }
      /* Blur */
      .hover07 figure img {
      -webkit-filter: blur(3px);
      filter: blur(3px);
      -webkit-transition: .3s ease-in-out;
      transition: .3s ease-in-out;
      }
      .hover07 figure:hover img {
      -webkit-filter: blur(0);
      filter: blur(0);
      }
      /* Gray Scale */
      .hover08 figure img {
      -webkit-filter: grayscale(100%);
      filter: grayscale(100%);
      -webkit-transition: .3s ease-in-out;
      transition: .3s ease-in-out;
      }
      .hover08 figure:hover img {
      -webkit-filter: grayscale(0);
      filter: grayscale(0);
      }
      /* Sepia */
      .hover09 figure img {
      -webkit-filter: sepia(100%);
      filter: sepia(100%);
      -webkit-transition: .3s ease-in-out;
      transition: .3s ease-in-out;
      }
      .hover09 figure:hover img {
      -webkit-filter: sepia(0);
      filter: sepia(0);
      }
      /* Blur + Gray Scale */
      .hover10 figure img {
      -webkit-filter: grayscale(0) blur(0);
      filter: grayscale(0) blur(0);
      -webkit-transition: .3s ease-in-out;
      transition: .3s ease-in-out;
      }
      .hover10 figure:hover img {
      -webkit-filter: grayscale(100%) blur(3px);
      filter: grayscale(100%) blur(3px);
      }
    </style>
  </head>
  <body>
    <h1>Hover over the images to see the effect</h1>
    <h2 id="demo01">1. Zoom In #1</h2>
    <div class="hover01 column">
      <div>
        <figure>
          <img src="/uploads/media/default/0001/03/b847dafa71d0dc9d81db3ddda418e12934a5aa88.png"  alt="Zoom in one" />
        </figure>
        <span>Hover</span>
      </div>
    </div>
    <h2 id="demo02">2. Zoom In #2</h2>
    <div class="hover02 column">
      <div>
        <figure>
          <img src="/uploads/media/default/0001/03/b847dafa71d0dc9d81db3ddda418e12934a5aa88.png" alt="Zoom in two" />
        </figure>
        <span>Hover</span>
      </div>
    </div>
    <h2 id="demo03">3. Zoom Out #1</h2>
    <div class="hover03 column">
      <div>
        <figure>
          <img src="/uploads/media/default/0001/03/b847dafa71d0dc9d81db3ddda418e12934a5aa88.png"  alt="Zoom out one" />
        </figure>
        <span>Hover</span>
      </div>
    </div>
    <h2 id="demo04">4. Zoom Out #2</h2>
    <div class="hover04 column">
      <div>
        <figure>
          <img src="/uploads/media/default/0001/03/b847dafa71d0dc9d81db3ddda418e12934a5aa88.png" alt="Zoom out two" />
        </figure>
        <span>Hover</span>
      </div>
    </div>
    <h2 id="demo05">5. Slide</h2>
    <div class="hover05 column">
      <div>
        <figure>
          <img src="/uploads/media/default/0001/03/b847dafa71d0dc9d81db3ddda418e12934a5aa88.png"  alt="Slide" />
        </figure>
        <span>Hover</span>
      </div>
    </div>
    <h2 id="demo06">6. Rotate<small>(+Zoom Out)</small></h2>
    <div class="hover06 column">
      <div>
        <figure>
          <img src="/uploads/media/default/0001/03/b847dafa71d0dc9d81db3ddda418e12934a5aa88.png" alt="Rotate" />
        </figure>
        <span>Hover</span>
      </div>
    </div>
    <h2 id="demo07">7. Blur</h2>
    <div class="hover07 column">
      <div>
        <figure>
          <img src="/uploads/media/default/0001/03/b847dafa71d0dc9d81db3ddda418e12934a5aa88.png" alt="Blur" />
        </figure>
        <span>Hover</span>
      </div>
    </div>
    <h2 id="demo08">8. Gray Scale</h2>
    <div class="hover08 column">
      <div>
        <figure>
          <img src="/uploads/media/default/0001/03/b847dafa71d0dc9d81db3ddda418e12934a5aa88.png" alt="Gray Scale" />
        </figure>
        <span>Hover</span>
      </div>
    </div>
    <h2 id="demo09">9. Sepia</h2>
    <div class="hover09 column">
      <div>
        <figure>
          <img src="/uploads/media/default/0001/03/b847dafa71d0dc9d81db3ddda418e12934a5aa88.png" alt="Sepia" />
        </figure>
        <span>Hover</span>
      </div>
    </div>
    <h2 id="demo10">10. Blur + Gray Scale</h2>
    <div class="hover10 column">
      <div>
        <figure>
          <img src="/uploads/media/default/0001/03/b847dafa71d0dc9d81db3ddda418e12934a5aa88.png" alt="Blur and Gray Scale" />
        </figure>
        <span>Hover</span>
      </div>
    </div>
  </body>
</html>