Картинка поверх другой - Вопросы по CSS

Подскажите как прописать вывод картинки сверху другой при наведении?
сейчас код такой
nsp_art img.nsp_image{}
   .nsp_art img.nsp_image:hover{
background:url("/images/stories/fon.png") no-repeat 100% 0;
}

пробовал прописать z-index - не помогло

nsp_art img.nsp_image{z-index: 1;}
   .nsp_art img.nsp_image:hover{
background:url("/images/stories/fon.png") no-repeat 100% 0;
z-index: 20;
}
как еще можно прописать?

.nsp_art div.nsp_image {
    background:url("/images/stories/fon1.png") no-repeat 100% 0;
}

.nsp_art div.nsp_image:hover {
    background:url("/images/stories/fon2.png") no-repeat 100% 0;
}

это если img заменить на div

У  вас в коде стоит картинка с классом nsp_image ? и вы хотите сделать на нее ховер ?

можно сделать ховер только в случае когда у вас

.nsp_art img.nsp_image {
   background:url("/images/stories/fon.png") no-repeat 100% 0;
   width:;
   height:;
  display:inline-block;
}
.nsp_art img.nsp_image:hover{
    background:url("/images/stories/fon-hover.png") no-repeat 100% 0;
}

cв-во  display:inline-block;   зависит от положения этого элемента

нужно не менять картинку одну на другую а налаживать, т.к. основная у меня модулем берется из контента, она будет в jpg, а сверху при наведении должна появляться вторая картинка ( в png с прозрачным фоном и надписью или изображением).
сейчас это работает но при условии что основная картинка в png, т.к. при наведении появляется вторая картинки и из за прозрачности фона все работает, но необходимо чтоб работало так и с jpg, т.е. картинка при наведении должна налаживаться сверху как второй слой, а не с низу как сейчас.

тогда ложить основную картинку в div ( nsp_art ?), и ховер делать на див
попробуйте так