Converting a text link into an image on hover
<p>I have a website with three links with text.</p>

<p>I'm trying to make it so when I hover over the text link a specific image shows up.</p>

<p>I've been able to hover over and change the color of the text.</p>

<p>But I can't figure out how to make each link's hover a different image.  </p>

<pre><code>   &lt;!DOCTYPE html&gt;
   &lt;head&gt;
   &lt;style&gt;
   /* mouse over link */
   a:hover {
   color: white;
   }
   &lt;/style&gt;
   &lt;/head&gt;
   &lt;body
   &lt;div class="flex-container"&gt;
   &lt;div class="flex-item"&gt;&lt;img src="cityscape.png"&gt;
   &lt;a href="ArchitectureWork.html"&gt;arch&lt;/a&gt;&lt;/div&gt;
   &lt;div class="flex-item"&gt;&lt;a href="FineArt.html"&gt;fine art&lt;/a&gt;&lt;/div&gt;
   &lt;div class="flex-item"&gt;&lt;a href="Doodles.html"&gt;doodles&lt;/a&gt;&lt;/div&gt;
   &lt;/div&gt;
  &lt;/body&gt;


 .flex-container {
   /*display: -webkit-flex;*/
   display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  color: aqua;
  align-content: center;
  padding-left: 90px;
  padding-right: 90px;

  }
 .flex-item{
 /*-webkit-flex: 1;*/
 /* I don't get order */
 order: 1;
 flex: 1;
 flex-basis: 20%;
 max-width: 1000px;
 min-width: 100px;
 align-self: center;
 padding-left: 10px;
 padding-right: 10px;
 padding-top: 20px;
 padding-bottom: 20px;

  }
</code></pre>