title: CSS transition hover (h1 inside a div seems not to work properly)
body: <p>I'm having a slight problem with css transition. On my website, I have a div, and in that div is a h1.</p>
  
  <p>Here's the css code.</p>
  
  <pre><code>#inner1 {
      background-image: url("rsz_astromenu1.jpg");
      height: 333px;
      width: 500px;
      display: inline-block;
      opacity: 0.5;
      font-size: 10px;
  }
  #inner1:hover {
      font-size: 50px;
      transition: font-size 1s linear;
      opacity: 1;
      transition: opacity 1s linear;
  }
  </code></pre>
  
  <p>I want to animate the opacity (from 0.5 to 1) and font-size (from 10px to 50px).
  However, when I hover my mouse over that div, the opacity is nicely transitioned, but the text just changes the size instantly. So the hover seems to work and change the font-size, why is transition omitted?</p>
  
  <p>If I make it #inner1 h1:hover, the transition works properly but only when I hover over the text. And I want the font-size transition when I hover over that div.</p>
  
  <p>I tried to work around the problem and write a JS script for enlarging the text.</p>
  
  <p>Here's what I came up with. I'll paste all the HTML content as well since there's not much of it.</p>
  
  <p>However, this is not really smooth, I've gone as far as to incrementing only 0.09px every millisecond, but it still looks bumpy and also sends hundreds of unnecessary commands to the browser, right? </p>
  
  <p>How can I solve that problem? Either with CSS or JS?
  Thanks in advance ;).</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;title&gt;Gallery&lt;/title&gt;
          &lt;link rel="stylesheet" type="text/css" href="mainStyle.css"&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="outer"&gt;
          &lt;div id="middle"&gt;
          &lt;div id="inner1" class="hover-menu"&gt;
              &lt;h1 id="astro-h1" class="hover-menu"&gt;Astrofotografia&lt;/h1&gt;
          &lt;/div&gt;
          &lt;div id="inner2"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;/div&gt;
          &lt;script&gt;
  
          var JSinner1 = document.getElementById("inner1");
          var JSastroh1 = document.getElementById("astro-h1")
          JSastroh1.style.fontSize = "16px";
  
  
          var textBigger = function() {
              var newSize = parseFloat(JSastroh1.style.fontSize) + 0.009 + "px";
              window.setInterval(textBigger, 1)
              if (parseFloat(newSize) &lt; 60) {
  
                  JSastroh1.style.fontSize = newSize;
                  console.log(newSize);
              }
          }
          JSinner1.addEventListener("mouseover", textBigger)
  
  
  
  
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>