Я планирую создать собственную фотогалерею для друга, и я точно знаю, как я собираюсь создавать HTML, однако я столкнулся с небольшой проблемой с CSS.

(Я бы предпочел, чтобы стилизация страницы не опиралась на jQuery, если это возможно)

Мой вопрос касается:

Data-Attribute в HTML

Background-image в CSSЯ использую этот формат для моих миниатюр HTML:

и я предполагаю, что CSS должен выглядеть примерно так:

.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*/
}

Моя цель - взятьdata-image-src отdiv.thumb в моем HTML-файле и использовать его для каждогоdiv.thumb(Ы)background-image Исходный код в моем файле CSS.

Вот Codepen Pen, чтобы получить динамический пример того, что я ищу:

http://codepen.io/thestevekelzer/pen/rEDJv