title: CSS: Image preview - Circle-to-Rectangle on hover
body: <p>This is an admittedly simple question that may have been asked here already asked but I'm struggling here.</p>
  <p>What I want is an image that has a circle preview that expands to a rectangle on hover (it also scales).  What I have is pretty close but the center kind of &quot;bobbles&quot; and I'm not a fan of the empty div approach...</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.card{
     color: #ff2772;
     border-radius: 15px;
     margin: 3px 1px;
     background-color: #2d3034;
     box-sizing: border-box;
     width: 300px;
     min-height: 400px;
     display: inline-block;
     transition: .25s;
     cursor:pointer;
     text-align: center;
     border: 1px solid #ff2772;
  }
  
  .button {
     background-color: #ff2772;
     color: #fff;
     padding: 10px 30px;
     border-radius: 10px;
  }
  
  #seasonOne .test {
     background: url('http://placehold.it/250x200') 50% 50% no-repeat; 
     width: 200px;
     height: 200px;
     border-radius: 100%;
     display: block;
     margin: 0 auto;
     transition: .3s;
     transform: scale(.9);
  }
  
  #seasonOne:hover .test {
     transform: scale(1);
     width: 250px;
     height: 200px;
     border-radius: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="seasonOne" class="card seasonOne"&gt;
     &lt;h3&gt;Season 1 (2009) - The Pilot&lt;/h3&gt;
     &lt;div class="test"&gt;
     &lt;/div&gt;
     &lt;p class="animated smallText fadeInRight"&gt;Ut cursus purus in lacinia tincidunt. Quisque lorem odio, posuere ut aliquam vel, fringilla at enim. Duis ligula lacus, viverra et sapien rhoncus, commodo euismod ipsum.&lt;/p&gt;
     &lt;a href="#area" class="button"&gt;Read More&lt;/a&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Like I said, what I have is pretty close.  It's just not centered properly which is driving me crazy. I also don't like having to set the image in the CSS rather than the HTML (though that's a minor gripe) Any ideas about a better way to go about this?</p>
  <p>Edit: Okay to clarify:</p>
  <p>1.) The scale from .9 to 1 is intentional</p>
  <p>2.) The rectangular proportions (250x200px) are important. It's not supposed to be a perfect square.</p>
  <p>3.) When I say the say the center 'bobbles&quot; I mean it deviates. It's subtle but it shifts around a few pixels.  Sadly I don't think the problem is showing up in my snippet which means it's coming from somewhere else in my CSS :/ Here's it on my site (sorry for the cutesy art) <a href="https://i.stack.imgur.com/aEIPk.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aEIPk.gif" alt="What the problems looks like" /></a></p>
  <p>I guess a better question is how can I achieve this effect without an empty div and guaranteed centered?</p>
  <p>Edit 2:
  The problem is in Firefox. You can see the art &quot;vibrate&quot; in this Codepen
  <a href="http://codepen.io/StuffieStephie/pen/zrZwEQ" rel="nofollow noreferrer">http://codepen.io/StuffieStephie/pen/zrZwEQ</a></p>