.box{
  padding: 8px;
  background-color: DodgerBlue;
}

.animatedBorderTop, .animatedBorderBottom, .animatedBorderLeft, .animatedBorderRight{
    position: relative;
}

.animatedBorderTop:after{
    content: '';
    position: absolute;
    border-bottom: 8px solid #ffd000;
    top: 0;
    left: 0;
    right: 100%;
    transition: all 500ms;
}



.COMPLEX:hover > .THE_IMGGAL .animatedBorderTop::after{
    right: 0;
}





.CHECKED_PROD .animatedBorderTop::after{
    right: 0;
}


.animatedBorderBottom:after{
    content: '';
    position: absolute;
    border-bottom: 8px solid #ffd000;
    bottom: 0;
    left: 0;
    right: 100%;
    transition: all 500ms;
	z-index: 0;
}

.COMPLEX:hover > .THE_IMGGAL .animatedBorderBottom::after{
    right: 0;
}

.CHECKED_PROD .animatedBorderBottom::after{
    right: 0;
}


.animatedBorderLeft:after{
    content: '';
    position: absolute;
    border-left: 8px solid #ffd000;
    bottom: 0;
    left: 0;
    top: 100%;
    transition: all 500ms;
}

.COMPLEX:hover > .THE_IMGGAL .animatedBorderLeft::after{
    top: 0;
}

.CHECKED_PROD .animatedBorderLeft::after{
    top: 0;
}



.animatedBorderRight:after{
    content: '';
    position: absolute;
    border-left: 8px solid #ffd000;
    bottom: 0;
    right: 0;
    top: 100%;
    transition: all 500ms;
}

.COMPLEX:hover > .THE_IMGGAL .animatedBorderRight::after{
    top: 0;
}

.CHECKED_PROD .animatedBorderRight::after{
    top: 0;
}