title: How to zoom in when hover on image but make border stay in place?
body: <p>I'm quite new to CSS and HTML and I want to create an image that zooms in fast when you hover. But the box radius zooms in as well. I know I'm doing something wrong with my div classes but I can't figure out what exactly. </p>
  
  <p>So I mean I want an effect like this:
  <a href="http://designshack.net/tutorialexamples/imagehovers/zoomandpan.html" rel="nofollow">http://designshack.net/tutorialexamples/imagehovers/zoomandpan.html</a>
  (the blonde girl one)</p>
  
  <p>This is the relevant code:</p>
  
  <pre><code> #circle {
      border: 4px solid;
  height:200px;
  width:200px;
      border-color: #000;
      border-radius: 100px;
      }
  
  
  
  .bolimg{
  background: url('http://i60.tinypic.com/wb82e0.jpg') no-repeat; 
  height:200px;
  width:200px;
  -webkit-border-radius: 100px;
      -webkit-transition: 2s ease-out;
       -moz-transition: 2s ease-out;
       -o-transition: 2s ease-out;
       -ms-transition: 2s ease-out;
       transition: 2s ease-out;
  }
  
  
  .bolimg:hover {
      opacity:1;
       background-image: url('http://i59.tinypic.com/k0szuv.jpg'); 
       -webkit-transition: 2.5s ease-out;
       -moz-transition: 2.5s ease-out;
       -o-transition: 2.5s ease-out;
       -ms-transition: 2.5s ease-out;
       transition: 2.5s ease-out;
        -webkit-transform:scale(1.25); /* Safari and Chrome */
      -moz-transform:scale(1.25); /* Firefox */
      -ms-transform:scale(1.25); /* IE 9 */
      -o-transform:scale(1.25); /* Opera */
       transform:scale(1.25);
  
  
  }
  </code></pre>
  
  <p>and this is the body</p>
  
  <pre><code>&lt;div id="circle" class="bolimg"&gt; 
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Excuse my english it's very bad and I'm sorry if this is a stupid question. Thanks in advance.</p>