title: Changing an image on hover while scaling it
body: <p>I need to get the image to change onmouseenter/hover to a different image. I looked around and found a lot of rollover solutions but that won't work for me because I need to scale the image on hover as well.</p>
  
  <p>Also the last image in #recent appears to be broken, hovering over the #galleries section has a link to it and i can't figure out if that is because of col-md-offset-1 or something else.</p>
  
  <pre><code>&lt;body&gt;
    &lt;div id="wrap"&gt;
  
      &lt;div id="topbar"&gt;
      &lt;/div&gt;
  
      &lt;div id="menu"&gt;
      &lt;/div&gt;
  
      &lt;div id="logo"&gt;
      &lt;/div&gt;
  
      &lt;div id="jumbotron"&gt;
      &lt;/div&gt;
  
      &lt;div id="recent"&gt;
        &lt;h1&gt;Recent Work&lt;/h1&gt;
        &lt;div class="col-md-2 col-md-offset-1"&gt;
          &lt;a href="http://shniper1337.github.io/firstbootstrap/"&gt;
            &lt;img src="images/firstbootstrap.png" class="img-rounded"&gt;&lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="col-md-2"&gt;
          &lt;a href="http://shniper1337.github.io/pong/"&gt;
            &lt;img src="images/pong.png" class="img-rounded"&gt;&lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="col-md-2"&gt;
          &lt;a href="http://shniper1337.deviantart.com/art/Photomontage-490696483"&gt;
            &lt;img src="images/design.png" class="img-rounded"&gt;&lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="col-md-2"&gt;
          &lt;a href="http://shniper1337.deviantart.com/art/Website-design-WIP-571887134"&gt;
            &lt;img src="images/survivingearth.png" class="img-rounded"&gt;
        &lt;/div&gt;
        &lt;div class="col-md-2"&gt;
          &lt;a href="http://shniper1337.deviantart.com/art/Old-Law-Firm-545208961"&gt;
            &lt;img src="images/lawfirm.png" class="img-rounded"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div id="galleries"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-md-4"&gt;
            &lt;h2&gt;Website Design&lt;/h2&gt;
            &lt;p&gt;Extensive experience with image editing software, html and css code, and a unique perspective of an IT major formerly in graphic design.&lt;/p&gt;
          &lt;/div&gt;
  
          &lt;div class="col-md-4"&gt;
            &lt;h2&gt;Software Engineering&lt;/h2&gt;
            &lt;p&gt;Information Technology second-semester Sophomore at State University of New York at Cobleskill. Passion for solving problems with logic and code.&lt;/p&gt;
          &lt;/div&gt;
  
          &lt;div class="col-md-4"&gt;
            &lt;h2&gt;Other Work&lt;/h2&gt;
            &lt;p&gt;Former graphic artist with a background in a hobbyist form of art known as forum signatures.&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div id="sn"&gt;
      &lt;/div&gt;
  
      &lt;div id="footer"&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
  
  &lt;/body&gt;
  
  
  body {
    background-color: #EAE8EB;
  }
  
  wrap {
    margin: auto;
  }
  
  #topbar {
    width: 100%;
    height: 50px;
    background-color: #000;
    margin-top: -10px;
  }
  
  #jumbotron {
      width: 100%;
      height: 750px;
      background-repeat: no-repeat;
      background-size: cover;
      background-image: url('http://www.arcanemarketing.com/wp-content/uploads/2013/05/placeholder.png');
  }
  
  #recent {
      margin: auto;
      background-color: #3C5F7C;
      width: 100%;
      height: 250px;
      margin-top: -20px;
  }
  
  #recent h1 {
      text-align: center;
      font-family: 'Alegreya Sans SC', sans-serif;
      font-size: 38px;
      font-weight: 700;
      padding-top: 10px;
      color: #EEF0F2;
  }
  
  #recent img {
      height: 155px;
      box-shadow: 5px 5px 5px #111111;
      margin-top: 10px;
      position: relative;
  }
  
  #galleries {
      background-color: #3c5f7c;
      height: 200px;
  }
  
  .col-md-4 {
      max-width: 27%;
      margin-left: 3%;
  }
  
  .row {
      margin-left: 6%;
  }
  
  #recent div:nth-of-type(1) img:hover {
      background-image: url("images/firstbootstrapfull.png"); 
      z-index: 1;
      position: relative; 
  }
  
  #recent div:nth-of-type(2) img:hover {
  
  }
  
  #recent div:nth-of-type(3) img:hover {
  
  }
  
  #recent div:nth-of-type(4) img:hover {
  
  }
  
  #recent div:nth-of-type(5) img:hover {
  
  }
  
  #galleries h2 {
      font-size: 32px;
      font-family: 'Alegreya Sans SC', sans-serif;
      font-weight: 500;
      color: #EEF0F2;
  }
  
  #galleries div:nth-of-type(1) h2 {
      text-align: right;
  }
  #galleries div:nth-of-type(2) h2 {
      text-align: center;
  }
  
  #galleries div:nth-of-type(3) h2 {
      text-align: left;
  }
  
  #galleries p {
      font-size: 18px;
      font-family: 'Catamaran', sans-serif;
      font-weight: 300;
      color: #eef0f2;
  }
  
  #galleries div:nth-of-type(1) p {
      text-align: right;
      margin: auto;
  }
  
  #galleries div:nth-of-type(2) p {
      text-align: center;
      margin: auto;
  }
  
  #galleries div:nth-of-type(3) p {
      text-align: left;
      margin: auto;
  }
  
  #footer {
    width: 100%;
    height: 20px;
    background-color: #000;
  }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/pekmuspf/" rel="nofollow" title="Here is a jsfiddle though it appears to be broken">Here is a jsfiddle that appears to be broken</a></p>
  
  <p>Solving this with css is preferred but not necessary.</p>