I am trying to make a webpage that allows the 2x2 of image blocks, when hovered over, to overshadow the other images that are in the body. 

But for some reason I cannot get the image to escape its own div box. 

```
html, body {
        height: 100%;
        width: 100%;
    }

    div {
        width: 50%;
        height: 50%;
        float: left;
        position: relative;
        transition: width 2s, height 4s;
        transition-delay: 2s;
    }
    div:hover {
            width: 100%;
            height: 100%}

    div:nth-of-type(1) {
        background: #ccc;
    }

    div:nth-of-type(2) {
        background: #bbb;
        border-left: 1px solid #f00;
    }

    div:nth-of-type(3) {
        background: #aaa;
        border-top: 1px solid #f00;
    }
    div:nth-of-type(4) {
        background: #ddd;
        border-top: 1px solid #f00;
        border-left: 1px solid #f00;
    }

    <body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    </body>

```