Utilizzo dell’attributo dati HTML per impostare l’URL di background-image CSS

Ho in programma di build una galleria fotografica personalizzata per un amico e so esattamente come sto andando a produrre l’HTML, tuttavia sto correndo un piccolo problema con il CSS.
(Preferirei che lo stile della pagina non si basasse su jQuery se ansible)


La mia domanda riguarda:
Data-Attribute in HTML
Background-image nei CSS


Sto usando questo formato per le mie miniature html:

e presumo che il CSS dovrebbe assomigliare a questo:

     .thumb { width:150px; height:150px; background-position:center center; overflow:hidden; border:1px solid black; background-image: attr(data-image-src);/*This is the question piece*/ } 

    Il mio objective è prendere l’ data-image-src dal div.thumb nel mio file HTML e usarla per ogni div.thumb background-image div.thumb nel mio file CSS.

    Ecco una penna Codepen al fine di ottenere un esempio dinamico di ciò che sto cercando:
    http://codepen.io/thestevekelzer/pen/rEDJv