CSS3 - immagine di sfondo con elementi che appaiono col mouse hover

[Papalla]

Ciao a tutti,

é il mio primo post e vi ringrazio in anticipo.

Ho realizzato quello che vedete qui: http://www.enet.it/laura/innovita/immagini.html

Non riesco però a renderlo responsive, o meglio: riesco a rendere responsive l'immagine di sfondo ma, a quel punto, le immagini che appaiono con mouse hover restano alle loro coordinare originali e non appaiono più sopra il giusto elemento dello sfondo.

Avete già affrontato un problema simile? Sapete darmi indicazioni?
Grazie.

 

[Devil-94]

Nel tuo codice non l'uso delle regole @media rule
vai su: http://www.html.it/guide/responsive-web-design-la-guida/


Ciao

 

[Papalla]

Non ho capito questo:"Nel tuo codice non l'uso delle regole @media rule"

 

[Max 1]

Ho realizzato quello che vedete qui: http://www.enet.it/laura/innovita/immagini.html

Io onestamente di responsive non ci vedo nulla! Se vuoi fare un'immagine mappata responsive con solo html e css non potrà mai avvenire perchè con coordinate fisse è ovvio che quando cambi risoluzione non combaciano più.
Puoi provare con un plu-in jquery VEDI QUI

 

[Papalla]

Infatti non é responsive, é quello che dovrei fare ma non riesco. O meglio, in locale sono riuscito a fare una versione in cui lo sfondo é responsive ma, riducendosi per esempio, l'immagine che appare con mouse hover (verde) non coincide più con lo sfondo.
Ora vedo jQuery che mi hai segnalato, grazie.