html,

body {

    width: 100%;

    height: 100%;

}

body {

    position: relative;

    padding: 10px;

}

.g-container {

    position: absolute;

    display: inline-block;

    // border: 3px solid red;

}

.g-resize { 

    content: "";

    position: relative;

    width: 20px;

    height: 20px;

    // border-radius: 50%;

    // background: blue;

    resize: both;

    overflow: scroll;

    z-index: 1;

}

// .g-resize::before {

    // content: "";

    // position: absolute;

    // bottom: 0;

    // right: 0;

    // width: 100px;

    // height: 100px;

    // border-radius: 50%;

    // background: deeppink;

// }

.g-content {

    position: absolute;

    bottom: -80px;

    right: -80px;

    width: 100px;

    height: 100px;

    background: black;

    pointer-event: none;

    &::before {

        content: "";

        position: absolute;

        width: 20px;

        height: 20px;

        background: yellow;

        border-radius: 50%;

        transition: .3s;

    }

}

​

.g-container:hover .g-content::before {

    transform: scale(1.1);

    box-shadow: -2px 2px 4px -4px #333, -4px 4px 8px -4px #333;

}

​

.g-resize::-webkit-resizer {

    background-color: transparent;

}