Мне лень писать код, но я себе это вижу как картинка в диве, в этом же диве еще один див, в нем кнопка (или сразу кнопка). У кнопки (или дива в котором кнопка) z-index выше... Готово =)
У меня была ситуация когда надо было сделать анимашку с прозрачным фоном и тенью, помню дизайнер долго мучался... И точно помню что SVG не подходила, т.к не давала прозрачность, а что он придумал в результате я не помню((
Из html5 верстальщику надо для начала - знать html4 ;) ибо много фишек 5-го еще не работают так как надо, браузеры потихоньку все отлаживают. ну и конечно парочку css фреймворков =)
min-width, а если позаморачиваться с медиа-запросами css, то можно будет сделать условия под конкретное разрешение (я так понимаю верстаете под мобильные устройства?)
