Html 一旦一个元素被裁剪，如何取消裁剪

我正在为一个班级制作一个网页，我们必须剪辑一个图像，这样只有一个小框出现，但当我们将鼠标悬停在它上面时，它必须恢复到完整大小

    .marker p{
        background-color: rgb(70,76,222);
        width: 150px; 
        height: 170px;
        color: white; 
        position: absolute;
        border-radius: 15px;
        overflow: visible;
        z-index:1;
        clip: rect(0px,20px,20px,0px);
    }
    .marker p:hover{


    }

原始尺寸为150 x 170，然后将其剪裁为0,20,20,0。当鼠标悬停在20x20矩形上时，如何将其恢复为完整尺寸

.marker p:hover{
    width:140px;
    height:170px;
}