*{ margin: 0; padding: 0; } #d1{ width: 200px; height: 100px; background: dodgerblue; transition: 1s all linear; text-align: center; line-height: 100px; margin: 100px auto; color: white; position: relative; font-size: 32px; font-weight: bold; } #d2{ position: absolute; left: 0; top: 0; width: 0; height: 10px; transition: 1s; } #d3{ position: absolute; right: 0; bottom: 0; width: 0; height: 10px; transition: 1s; } #d4{ position: absolute; left: 0; bottom: 0; width: 10px; height: 0; transition: 1s 1s; } #d5{ position: absolute; right: 0; top: 0; width: 10px; height: 0; transition: 1s 1s; } #d1:hover{ background: transparent; color:dodgerblue ; } #d1:hover #d2,#d1:hover #d3{ width: 200px; background:dodgerblue; } #d1:hover #d4,#d1:hover #d5{ background:dodgerblue; height: 100px; }