Codevember Day #13

<!-- 

For CSS Grid expertise:

Rachel Andrew: https://gridbyexample.com/

Jen Simmons: https://labs.jensimmons.com/

 -->

<div id="holder">

  <div id="left">

    <div id="grid">

      <img src="https://www.andybarefoot.com/codepen/images/trump/t1.jpg">

      <img src="https://www.andybarefoot.com/codepen/images/trump/t2.jpg">

      <img src="https://www.andybarefoot.com/codepen/images/trump/t3.jpg">

      <img src="https://www.andybarefoot.com/codepen/images/trump/t4.jpg">

      <img src="https://www.andybarefoot.com/codepen/images/trump/t5.jpg">

      <img src="https://www.andybarefoot.com/codepen/images/trump/t6.jpg">

      <img src="https://www.andybarefoot.com/codepen/images/trump/t7.jpg">

      <img src="https://www.andybarefoot.com/codepen/images/trump/t8.jpg">

      <img src="https://www.andybarefoot.com/codepen/images/trump/t9.jpg">

      <img src="https://www.andybarefoot.com/codepen/images/trump/t10.jpg">

      <img src="https://www.andybarefoot.com/codepen/images/trump/t11.jpg">

      <img src="https://www.andybarefoot.com/codepen/images/trump/t12.jpg">

      <img src="https://www.andybarefoot.com/codepen/images/trump/t13.jpg">

      <img src="https://www.andybarefoot.com/codepen/images/trump/t14.jpg">

      <img src="https://www.andybarefoot.com/codepen/images/trump/t15.jpg">

      <img src="https://www.andybarefoot.com/codepen/images/trump/t16.jpg">

      <img src="https://www.andybarefoot.com/codepen/images/trump/t17.jpg">

      <img src="https://www.andybarefoot.com/codepen/images/trump/t18.jpg">

      <img src="https://www.andybarefoot.com/codepen/images/trump/t19.jpg">

      <img src="https://www.andybarefoot.com/codepen/images/trump/t20.jpg">

      <img src="https://www.andybarefoot.com/codepen/images/trump/t21.jpg">

      <img src="https://www.andybarefoot.com/codepen/images/trump/t22.jpg">

      <img src="https://www.andybarefoot.com/codepen/images/trump/t23.jpg">

      <img src="https://www.andybarefoot.com/codepen/images/trump/t24.jpg">

      <img src="https://www.andybarefoot.com/codepen/images/trump/t25.jpg">

    </div>

    <p id="toggle">Toggle Grid Lines</p>

  </div>

  <div id="text">

    <h1>Orange</h1>

    <p>I once had a book full of amazing Macromedia Flash experiments, one of which was an image of the Mona Lisa that would morph as you moved the mouse over it.</p>

    <p>And as @LawrieCape kindly reminded me in the comments, it was by Yugo Nakamura in "New Masters of Flash".</p>

    <p>Anyway, this is my version of that experiment using CSS Grid to morph the image.</p>

  </div>

</div>

​