title: CSS hover transition cross-browser compatibility
body: <p>I have a simple language select page with pure CSS animated transitions. I've made a jsFiddle <a href="http://jsfiddle.net/WChargin/TSqDg/">here</a>.</p>
  
  <p>How it's supposed to behave is as follows:</p>
  
  <ol>
  <li>User mouses over one of two (or more) language selectors.</li>
  <li>That language selector transitions upward and comes to full opacity. The relevant language text (e.g., English, Espa&ntilde;ol) appears as well.</li>
  <li>The user either clicks on the link or mouses out, in which case the transition reverses.</li>
  </ol>
  
  <p>In Chrome, it behaves as expected.</p>
  
  <p>In Firefox, when I mouse over <em>one</em> image, <em>both</em> move up.</p>
  
  <p>In Opera, it behaves mostly as expected, but the text jumps back down after moving up.</p>
  
  <p>I'm trying to understand <em>why</em> this would happen in these browsers, and how I can fix it, if possible.</p>
  
  <p>In the case that jsFiddle is down, the relevant code is:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="container"&gt;&lt;div id="cell"&gt;
      &lt;div class="langcell"&gt;&lt;a href="en/index.html"&gt;
          &lt;img src="http://upload.wikimedia.org/wikipedia/en/thumb/a/a4/Flag_of_the_United_States.svg/200px-Flag_of_the_United_States.svg.png" /&gt;&lt;br/&gt;&lt;p&gt;English&lt;/p&gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="langcell"&gt;&lt;a href="es/index.html"&gt;
          &lt;img src="http://upload.wikimedia.org/wikipedia/en/thumb/9/9a/Flag_of_Spain.svg/200px-Flag_of_Spain.svg.png" /&gt;&lt;br/&gt;&lt;p&gt;Espa&amp;ntilde;ol&lt;/p&gt;&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>html, body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
  }
  #container {
      width: 100%;
      height: 100%;
      display: table;
  }
  #cell {
      display: table-cell; vertical-align: middle; text-align: center;
  }
  .langcell {
      display: inline-block;
      margin: auto 1em;
  }
  a {
      position: relative;
      top: 0;
      -webkit-transition: top 0.25s;
      -moz-transition: top 0.25s;
      -o-transition: top 0.25s;
      transition: top 0.25s;
      color: black;
      text-decoration: none;
  }
  a:hover {
      top: -16pt;
  }
  a p {
      font-size: 14pt;
      font-weight: bold;
      text-transform: uppercase;
      font-family: Verdana, Geneva, sans-serif;
      letter-spacing: 0.05em;
      opacity: 0;
      -webkit-transition: opacity 0.25s;
      -moz-transition: opacity 0.25s;
      -o-transition: opacity 0.25s;
      transition: opacity 0.25s;
  }
  a:hover p {
      opacity: 1;
  }
  a img {
      opacity: 0.65;
      -webkit-transition: opacity 0.25s;
      -moz-transition: opacity 0.25s;
      -o-transition: opacity 0.25s;
      transition: opacity 0.25s;
  }
  a:hover img {
      opacity: 1;
  }
  </code></pre>