title: How to make flex border red on hover?
body: <p>Is it possible to add a red border around a flex box when the cursor hovers over the flex box?
  If so, please could you modify the code. Thank you.
  If there is a border animation or something that will look good please post your ideas.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>      .container {
          width: 80%;
          margin: 0 auto;
          font-size: 14;
          text-align: center;
        }
        .grid-item {
          width: 200px;
          height: 200px;
          display: inline-block;
          margin: 4px;
          font-size: 1rem;
          vertical-align: top;
          padding: 16px;
        }
  
        .green {
          background-color: darkgreen;
        }
        .blue {
          background-color: cornflowerblue;
        }
        .navy {
          background-color: navy;
        }
        .gray {
          background-color: gray;
        }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
  
  &lt;meta charset="UTF-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;meta http-equiv="X-UA-Compatible" content ="ie=edge"&gt;
  
  
  
  &lt;title&gt;Flexbox&lt;/title&gt;
  
  &lt;style&gt;
  
  
  &lt;/style&gt;
  &lt;/head&gt;
  
  
  
  &lt;body&gt;
  
  
  
      &lt;div class="container"&gt;
        
  
        &lt;div class="grid-item navy"&gt;
          &lt;h2 style="color:white"&gt; 
          Box 1
          &lt;/h2&gt;
        &lt;/div&gt;
  
  
        &lt;div class="grid-item gray"&gt;
  
          &lt;h2 style="color:white"&gt; 
          Box 2
          &lt;/h2&gt;
        &lt;/div&gt;
  
        &lt;div class="grid-item green"&gt;
  
          &lt;h2 style="color:white"&gt; 
          Box 3 
          &lt;/h2&gt;
        &lt;/div&gt;
  
        &lt;div class="grid-item blue"&gt;
          &lt;h2 style="color:white"&gt; 
          Box 4
          &lt;/h2&gt;
        &lt;/div&gt;
  
  
      &lt;/div&gt;
  
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>