html,

body {

    width: 100%;

    height: 100%;

}

body {

    position: relative;

    padding: 10px;

    background: url("https://images.unsplash.com/photo-1558051815-0f18e64e6280?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ");

    background-size: cover;

}

.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-content {

    position: absolute;

    bottom: -160px;

    right: -180px;

    color: rgba(#000, 0.8);

    background-image: linear-gradient(

        160deg,

        rgb(255, 222, 30) 50%,

        rgb(255, 250, 80)

    );

    width: 200px;

    height: 180px;

    pointer-event: none;

    text-align: center;

    font-family: "marker felt", "comic sans ms", sans-serif;

    font-size: 24px;

    line-height: 1.3;

    padding: 1em;

    box-sizing: border-box;

    &:before {

        content: "";

        position: absolute;

        width: 20px;

        height: 20px;

        top: 0;

        left: 0;

        border-radius: 50%;

        background-image: radial-gradient(

            at 60% 30%,

            #f99,

            red 20%,

            rgb(180, 8, 0)

        );

        background-position: 20% 10%;

        cursor: pointer;

        pointer-events: none;

        transform: scale(0.8);

        box-shadow: -5px 10px 3px -8.5px #000, -1px 7px 12px -5px #000;

        transition: all 0.3s ease;

        transform: scale(0.8);

    }

}

​

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

    transform: scale(0.9);

    box-shadow: -5px 10px 6px -8.5px #000, -1px 7px 16px -4px #000;

}

​

.g-resize::-webkit-resizer {

    background-color: transparent;

}

​