HTML - Увеличить/перейти изображение/цвет, чтобы заполнить всю веб-страницу

Question

Что касается этого fiddle, то когда я нажимаю на a href, который является изображением в этом случае, я хотел бы, чтобы изображение увеличивалось/переводилось, чтобы заполнить полный страницы с переходом/масштабированием, начиная с div, в котором он размещен. Если это невозможно, я хотел бы заполнить страницу цветом фона div, чтобы изображение было помещено с переходом/заполнением цвета, начиная с div, содержащего изображение.

Я пробовал применять масштабирование, преобразование, наложение, но не могу понять это правильно. поэтому, пожалуйста, обращайтесь за помощью. Код в примере не имеет переходов, которые я пробовал, поскольку они вообще не работают.

Я старался изо всех сил ставить свое воображение на слова. если это не ясно & любой желающий помочь, пожалуйста, задавайте вопросы.

Answer 1

Я бы не увеличил изображение до всего тела HTML, потому что изображение будет пикселировано и замедлит работу браузера.

Вот мое решение, чтобы заполнить веб-страницы цвет:

$('.circleDiv').on('mouseenter', 'a', function() { 
    $('body').animate({ 
    backgroundColor: "#09f" 
    }, 1000); 
}); 

See Demo Here