Создание анимированного изображения с наложением CSS

Question

Я хотел бы знать, как создать этот анимированный многоцветный эффект наложения поверх изображения. Вот пример, который я хочу воспроизвести: http://elegantthemes.com/preview/Bloom/

Это близко, поскольку я получил использование кода, проверенного на другом сайте. Смотрите код ниже. Это работало с добавленным текстом, но я не мог успешно интегрировать желаемое изображение.

#colorCycle { background-color: #C30;
padding-top: 5px; padding-right: 7px; padding-bottom: 7px; padding-left: 7px;
color: #FFF;
text-align: center;
animation-name: homeCycle;
animation-duration:6s;
animation-direction:alternate;
animation-iteration-count:infinite;

-webkit-animation-name: homeCycle;
-webkit-animation-duration:6s;
-webkit-animation-direction:alternate;
-webkit-animation-iteration-count:infinite; }

@keyframes homeCycle
{
0% {background-color:#006;}
25% {background-color:#060;}
50% {background-color:#CC3200;}
75% {background-color:#603;}
}

@-webkit-keyframes homeCycle
{
0% {background-color:#006;}
25% {background-color:#060;}
50% {background-color:#CC3200;}
75% {background-color:#603;}
}