title: Creating a Zoom Effect on an image on hover using CSS?
body: <p>I'm currently trying to create a zoom effect on hover over one of my four images. The problem is most examples usually use tables or mask divs to apply some sort of effect. </p>
  
  <p>Here's one example that implements what I would like <a href="http://designshack.net/tutorialexamples/PhotoWall/fade.html" rel="noreferrer">this</a>. </p>
  
  <p><a href="http://jsfiddle.net/27Syr/" rel="noreferrer">This</a> is my code so far. </p>
  
  <h3>HTML</h3>
  
  <pre><code>&lt;div id="menu"&gt;
  &lt;img class ="blog" src="http://s18.postimg.org/il7hbk7i1/image.png" alt=""&gt;
  &lt;img class ="music" src="http://s18.postimg.org/4st2fxgqh/image.png" alt=""&gt;
  &lt;img class ="projects" src="http://s18.postimg.org/sxtrxn115/image.png" alt=""&gt;
  &lt;img class ="bio" src="http://s18.postimg.org/5xn4lb37d/image.png" alt=""&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h3>CSS</h3>
  
  <pre><code>#menu {
      max-width: 1200px;
      text-align: center;
      margin: auto;
  }
  
  #menu img {
      width: 250px;
      height: 375px;
      padding: 0px 5px 0px 5px;
      overflow: hidden;
  }
  
  .blog {
      height: 375px;
      -webkit-transition: all 1s ease;
      -moz-transition: all 1s ease;
      -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
      transition: all 1s ease;
  }
  
  .blog:hover {
      cursor: pointer;
      height:475px;
      width: 350px;
  }
  
  .music {
      height: 375px;
  }
  
  .projects {
      height: 375px;
  }
  
  .bio {
      height: 375px;
  }
  </code></pre>