Илья Пирожок

У вас один вызов gulp.dest - соответственно "выплевывает" один файл.

Я бы советовал продолжать осваивать front-end а именно HTML5/CSS3 (с его Bootrstrap, Flex), уметь работать с CSS3 анимациями, препроцессоры вроде SASS/Stylys, jQuery, получше выучить нативный JS (не просто работу с DOM, а вообще понять его смысл как функционального языка, на это уйдет немало времени). Ну а далее все популярные инструменты вроде Gulp/Bower и так далее.
Если интересна тема back-end и вообще хочется понять как "там" все работает то учи PHP. Что бы про него не говорили но он дает быстрое понимание серверной стороны сайта.
Отличная книга "PHP и MySQL. От новичка к профессионалу." Кевин Янк

А что если сделать так:
Создаем тег-ссылку a - делаем ей display: block;, задаем требуемую ширину и высоту и делаем ей фиолетовый background-color; Далее в эту ссылку помещаем img и задаем ему src=ваша рамка, полностью вся. Делаем img { display: none; } а при наведении на ссылку img { display: block; }, то есть так(размеры беру случайные)

a {
    display: block; (или inline-block, попробуйте и так и так)
    width: 120px;
    height: 40px;
    padding: 10px 20px;
    background-color: фиолетовый цвет;
}

a img {
    display: none;
    width: 100%;
}

a:hover img {
    display: block;
}