Example of adding various zoom effects on hover

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</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>