html,
body {
  height: 100px;
  width: 300px;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

.block{
    display: flex;
    width:50px;
    height:50px;
    transition: width 1s, height 1s;
    background:red;
    overflow: hidden;
    justify-content: center;
    align-items: center;
}
.block:hover {
    width:150px;
    height:150px;
    transition: width 1s, height 1s;
    justify-content: center;
    align-items: center;
}