HTML - Grow/transition image/color to fill entire web page

With respect to this fiddle, When I click on the a href which is an image in this case, I'd like the image to grow/transition to fill the full page with the transition/scaling starting from the div in which it is placed. If this isn't possible, I'd like to fill page with the background color of the div that the image is placed in with the transition/filling of color starting from the div containing the image.

I tried applying scaling, transform, overlay but can't get it right. hence, requesting help here please. The code in the example doesn't have the transitions I've tried as they don;t work anyway.

I've tried to put my imagination to words much as I can. if this isn't clear & anyone is willing to help, please feel free to ask questions.

Answers 1

  • I would avoid to scale up the image to entire HTML body, because the image will be pixelated and slow down the browser performance.

    Here is my solution to fill up web page color:

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

    See Demo Here


Related Articles