Hover Circle Thing

by Giorgio Malvone

HTML

<body>
    <div class="circularContainer">
        <p>Touch Me!</p>
        </div>
</body>

CSS

body{
    background-color:#FED8D1;
}
.circularContainer{
    display:table;
    position: fixed;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    background-color:tomato;
    border:3px solid #B24532;
    border-radius:100%;
    height:100px; width: 100px;
    transition: width 2s, height 2s, background-color 2s, background-image 2s, background-size;
    
}
.circularContainer:first-child{
    display:table-cell;
    text-align:center;
    vertical-align:middle;
}
.circularContainer:hover{
    width:200px; height:200px;
    background-color:#FFA047;
        background:url("https://cdn.shopify.com/s/files/1/1061/1924/files/Smiling_Face_Emoji_with_Blushed_Cheeks.png?9898922749706957214");
    cursor:default;
    background-size: contain;
}