title: how to put an image upon a image in a li which (on hover) changes its z-index
body: <p>I have the following image in a li:</p>
  
  <pre><code>  &lt;ul class="columns"&gt;
      &lt;li&gt;&lt;a href="some url"&gt;&lt;img src="images/layouts/test.png" alt="" /&gt;&lt;/a&gt; &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>My css looks like this:</p>
  
  <pre><code>ul.columns li img {
          position: relative;
          }
  
      ul.columns li:hover img{
          z-index: 999;
          }
  </code></pre>
  
  <p>What does it do:
  When I hover my mouse over the image (test.png), the image get's a new z-index. This is needed to keep the image visible (a div is displayed on hover and the image should stay on top of it). This all works great.</p>
  
  <p>Now I want to have a image in the top right corner (displaying an X, so lets call it x.png) over the normal image. How to do this? Making the test.png a background image is not an option. Played around with some classes and z-index but the second image always appears besides the test.png image. I think I do something wrong with the CSS, but I don't know how to z-index the second image in a li</p>
  
  <p>I have this atm:</p>
  
  <pre><code>&lt;ul class="columns"&gt;
      &lt;li&gt;&lt;a href="some url"&gt;&lt;img src="images/layouts/test.png" alt="" /&gt; &lt;img class="x" src="images/x.png" alt="" /&gt;&lt;/a&gt; &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Thanks</p>