Mouse Hover + Icon Aparece + Texto também

Olá Pessoal =D

Estou precisando de uma ajuda "gigantesca". Fui convidado para desenvolver um Atlas de Imagenologia (Raio-X) da Faculdade de Odontologia onde estudo.

O Atlas será para alunos, então a ideia é forçar eles a descobrirem as estruturas que estão no raio-x. Ela quer fazer da seguinte forma:

- Você tem uma imagem semelhante a que está abaixo, o usuário vai passar o mouse em uma determinada região da imagem, e ao passar sobre esta região, vai surgir um ícone (seta vermelha) e um texto (sem div sem nada) descrevendo o que é aquela região.

 Como eu não manjo muito de CSS, até achei alguns modelos que mexem com <area> do html, mas não consegui produzir nada palpável.

 

 ** Preciso de um código simples, que eu possa inserir em aproximadamente 80 imagens. Vou ter mais ou menos 2~3 ícones (seta, círculo, quadrado,...).

ESQUEMA DE COMO EU PRECISO QUE O CÓDIGO SEJA:

http://imgur.com/kXq9Xww

Na imagem abaixo, já está inserido as setas e o quadrado vermelho. Isso não deverá aparecer de cara, somente após o aluno passar o mouse por cima./applications/core/interface/imageproxy/imageproxy.php?img=http://dentistasrn.com.br/wp-content/uploads/2015/10/panoramica1.png&key=3e415f74e39755d331aa25336794f31bd88136d57e9920d15adc29e6c99025ef" alt="panoramica1.png" />