*{
            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;
        }