Transição apenas para a borda ao passar o mouse, mas não para o plano de fundo

Aqui eu tenho algumas CSS:

    #image-edges-beneath:hover{
    background-color: blue;
    }

    #image-edges:hover{
      background-color: blue;
    }

    #image-edges-beneat:hover:after{
    -webkit-transition: all 1s ease;
         -moz-transition: all 1s ease;
           -o-transition: all 1s ease;
          -ms-transition: all 1s ease;
              transition: all 1s ease;
      border: 2px solid #F1FD6D;
    }

    #image-edges:hover:after{
    -webkit-transition: all 1s ease;
         -moz-transition: all 1s ease;
           -o-transition: all 1s ease;
          -ms-transition: all 1s ease;
              transition: all 1s ease;
      border: 2px solid #F1FD6D;
    }

Entretanto, isso não funciona. A única coisa que acontece é que a cor do plano de fundo tem uma transição, enquanto eu quero mudar apenas em hover, enquanto a borda eu quero ter uma transição, então basicamente a borda desaparece na cor enquanto a cor do plano de fundo muda de cor imediatamente ao passar o mouse . Isso é o que eu quero realizar, mas isso não funciona. :( Qualquer usuários de idéias?

questionAnswers(2)

yourAnswerToTheQuestion