[SOLUCIONADO] Mostrar texto al hacer hover sobre una imagen

[madman_18]

Buenas tardes!!!

Estoy teniendo problemas a la hora de hacer una especie de rollover de una imagen jugando con las transiciones de css y su opacity.

Mi estructura es la siguiente:

Código HTML:

<ul class='mi-lista'>
<li>
<img src='mi_img.jpg'/>
<div class='nota'>
<p>periquito!</p>
</div>
</li>
</ul>
 

La cosa está en que, si cambio la opacidad de "nota" al hacer el hover sobre mi "img" tal que así:

Código CSS:

ul.mi-lista li img:hover div.nota{
   opacity:1;
}
ul.mi-lista li img:hover{
   opacity:0;
}
 

No lo aplica, sin embargo con el código exactamente igual, salvo que aplicado al "li"

Código CSS:

ul.mi-lista li:hover div.nota{
   opacity:1;
}
ul.mi-lista li:hover{
   opacity:0;
}
 

sí ocurre el efecto.

Ahora bien, me gustaría aplicarlo sobre la imagen ya que, el contenedor siempre va a medir un tamaño fijo (200x300 si no recuerdo mal la medida, para mostrar de una forma que me gusta la lista) pero la imagen no tiene por qué medir el 100% (puede que mida 140x200, por decir algo).
¿Algún consejo?

Saludos!

{EDITO} Yo mismo me respondo xDD. Haciendo pruebas se me olvidó cambiar el orden de los elementos para aplicar el efecto css y como llevaba un rato ya, mentalmente leía "bien" el código aunque estaba desordenado (un fallo bastante puñetero...como cuando buscas un ";" y no lo encuentras)

Saludos!

[pzin]

Supongo que el error era porque div.nota no está dentro del elemento imagen, que es según tu selector como tendría que estar.

No sé cómo lo solucionaste al final, pero podrías haber usado el selector de hermanos para solucionarlo:

Código CSS:

ul.mi-lista li img:hover + div.nota{
   opacity:1;
}