title: How to change color of text to background color of container div?
body: <p>I am trying to add a CSS transition to my <code>div</code> where on hover it changes color to whatever the <code>background-color</code> of the <code>div</code> is. Basically I am trying to achieve some kind of color inversion if that's the right term.</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>.container .box {
      text-align: center;
      font-size: 3em;
      color: white;
      padding: 10px;
      text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.1);
      font-family: 'Tourney', cursive;
  
      transition-property: font-size, color, text-shadow;
      transition-timing-function: ease-out;
      transition-duration: 800ms;
  }
  
  .box:hover {
      color: black; /* What should I use here? */
      font-size: 5em;
      text-shadow: 8px 8px 0 rgba(0, 0, 0, 0.8);
      text-shadow: 5px 5px 0 rgba(255, 255, 255, 0.2);
      border: solid white 2px;
  }
  .box1 {
      background-color: chocolate;
  }
  
  .box2 {
      background-color: rebeccapurple;
  }
  
  .box3 {
      background-color: powderblue;
  }
  
  .box4 {
      background-color: orange;
  }
  
  .box5 {
      background-color: seagreen;
  }
  
  .box6 {
      background-color: gold;
  }
  
  .box7 {
      background-color: firebrick;
  }
  
  .box8 {
      background-color: violet;
  }
  
  .box9 {
      background-color: aquamarine;
  }
  
  .box10 {
      background-color: cornflowerblue;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
      &lt;div class="box box1"&gt;1&lt;/div&gt;
      &lt;div class="box box2"&gt;2&lt;/div&gt;
      &lt;div class="box box3"&gt;3&lt;/div&gt;
      &lt;div class="box box4"&gt;4&lt;/div&gt;
      &lt;div class="box box5"&gt;5&lt;/div&gt;
      &lt;div class="box box6"&gt;6&lt;/div&gt;
      &lt;div class="box box7"&gt;7&lt;/div&gt;
      &lt;div class="box box8"&gt;8&lt;/div&gt;
      &lt;div class="box box9"&gt;9&lt;/div&gt;
      &lt;div class="box box10"&gt;10&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>As I have marked out with my comment, on <code>.box:hover { color : .. }</code>, I don't know what to put there. At first I thought a CSS variable would do the job but they aren't dynamic, which means I would need 10 different CSS variables if I had 10 boxes to invert colors. Is there a clever solution here?</p>