Ciao,
per far funzionare in quel modo lo z-index, dal momento che si tratta di un elemento figlio dentro un elemento genitore, dovresti utilizzare un ulteriore elemento contenitore e attribuire, a tutti e tre, un position:relative (o absolute), quindi giocare un po con il valore di z-index.

Questo è quanto sono riuscito ad ottenere dopo qualche semplice googleata tipo "z-index child parent":
codice:
#contenitore{
  position:relative;
  z-index: 10;
}
#tdprova{
  position:relative;
  width:200px;
  height:200px;
  background-image: url("cornice.png");
  z-index: initial;
}
#imgprova{
  position:relative;
  width:100px;
  height:100px;
  z-index: -1;
}

...

<div id="contenitore"><div id="tdprova"><img id="imgprova" src="9.jpg" alt="9"></div></div>
Scavando un po' più a fondo si può trovare diverso materiale per ottenere delle soluzioni al problema.

Posto un esempio funzionante con tre differenti soluzioni da cui puoi prendere spunto:
codice:
<!DOCTYPE HTML>
<html>
  <head>
    <title>Esempio</title>
    <meta charset="utf-8">
    <style type="text/css">
    
  /* ------ Metodo 1: outline ------
  */
      #img1 {
        outline:10px solid rgba(119, 119, 119, .7);
        outline-offset:-10px;
      }
      
  /* ------ Metodo 2: border-box ------
  */
      #img2{
        display:inline-block;
        box-sizing:border-box;
        border:solid rgba(119, 119, 119, .7);
        border-width:10px 10px 30px;
      }
      
  /* ------ Metodo 3: div:after ------
  */
      #img3{
        display:inline-block;
      }
      #img3>div{
        position:relative;
      }
      #img3>div>img{
        display:block;
      }
      #img3>div:after{
        content:"";
        position:absolute;
        top:0; bottom:0; left:0; right:0;
        border:solid rgba(119, 119, 119, .7);
        border-width:10px 10px 30px;
      }

    </style>
   </head>
  <body>
    <h1>Cornice trasparente sopra immagine</h1>
    
    <h2>Metodo 1: outline</h2>
    <ul>
      <li>E' utilizzato un semplice tag img</li>
      <li>La cornice può avere un solo spessore uguale per tutti i lati</li>
      <li>La proprietà outline-offset non è supportata da IE</li>
    </ul>
    <img id="img1" src="image.jpg">
    <hr>
    
    <h2>Metodo 2: border-box</h2>
    <ul>
      <li>La cornice può avere spessori differenti per i singoli lati</li>
      <li>L'immagine è impostata come background di un div</li>
      <li>E' necessario specificare le dimensioni esatte dell'immagine</li>
    </ul>
    <div id="img2" style="background:url('image.jpg');width:200px;height:200px;"></div>
    <hr>

    <h2>Metodo 3: div:after</h2>
    <ul>
      <li>La cornice può avere spessori differenti per i singoli lati</li>
      <li>E' utilizzata una struttura di più elementi nidificati (due div e un tag img)</li>
    </ul>
    <div id="img3"><div><img src="image.jpg"></div></div>
    <hr>

  </body>
</html>