title: Image zoom on hover with CSS
body: <p>I'm trying to do this guide: <a href="https://stanhub.com/how-to-create-zoom-effect-on-image-hover-with-css-and-jquery/" rel="nofollow">Link to Guide</a> and I cant get that end :S, my image doesn't zoom out when I hover the image :S</p>
  
  <p>The result should be something like this: <a href="https://stanhub.com/tutorials/hover-to-zoom-image-effect/" rel="nofollow">Result</a></p>
  
  <p>Here's my code:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;body&gt;
  
  &lt;div id="logo"&gt;
      &lt;img src="img/logotipo.png" alt="logotipo" id="logotipo" class="img-responsive" /&gt;
  &lt;/div&gt;
  
  &lt;div class="container"&gt;
      &lt;nav class="navbar"&gt;
          &lt;p class="navbar-brand"&gt;JVasconcelos&lt;/i&gt;
          &lt;ul class="nav"&gt;
              &lt;li&gt;&lt;a href="#" title="Return to the Homepage"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#" title="Visit the Features Page"&gt;Features&lt;/a&gt;    &lt;/li&gt;
              &lt;li&gt;&lt;a href="#" title="See the prices"&gt;Pricing&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#" title="Learn more about our organization"&gt;About&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#" title="Contact us!"&gt;Contact&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/nav&gt;
  &lt;/div&gt;
  &lt;div class="container"&gt;
      &lt;div class="col-md-12"&gt;
  
          &lt;div class="col-md-4" id="img1"&gt;
              &lt;img src="img/img01.png" alt="img01" class="img-responsive img-zoom" id="img01"&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;script&gt;
      $(document).ready(function(){
          $('.img-zoom').hover(function() {
              $(this).addClass('transition');
  
              }, function() {
              $(this).removeClass('transition');
              });
      });
  &lt;/script&gt;                           
  
  &lt;script src="js/jquery-2.2.4.min.js"&gt;&lt;/script&gt;
  &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  
  &lt;/body&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>/* Navbar styling */
  
  .navbar { background: #ddd; margin-top: 200px; border-radius: 0; }
  .navbar ul { list-style: none; padding: 0; margin: 0; }
  .navbar li a { float: right; line-height: 80px; padding: 0 30px; text-decoration: none; color: #555; }
  .navbar li a:hover { background-color: #aaa; color: #333; }
  .navbar-brand { margin-left: 40px; margin-top: 15px; }
  
  /* Logotipo */
  
  #logo { width: 300px; height: 300px; position: absolute; left: 50%; top: 50%; margin-left: -150px; margin-top: -350px; }
  
  /* COL-MD-12 */
  
  .col-md-12 { height: 450px; background-color: #fff; text-align: center; margin-top: -20px; padding-top: 45px; }
  
  /* COL-MD-4 */
  
  #img1 { height: 150px; width: 150px; background-color: #333; text-align: center; color: #fff; margin-left: 20px; }
  #img01 { height: 150px; width: 150px; border-radius: 1px; border-spacing: 2px; border-color: #0000000; }
  
  /* HOVER */
  
  .img-zoom { width: 350px; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; }
  .transition { -webkit-transform: scale(2);  -moz-transform: scale(2); -o-transform: scale(2); transform: scale(2); }
  </code></pre>
  
  <p>When I set up this code, I get the image possitioned where I want it, but when I hover the image, it doesn't work, and nothing happens :S
  What I'm doing wrong guys? Sorry for this long post :S</p>