Transition only for the border on hover, but not for background

Question

Here I have some 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;
    }

However this does not work. The only thing which happens is that the background color has a transition while I want it to only change on hover, while the border I want to have a transition, so basically the border fades into the color while the background color changes color immediately upon hover. That's what I want to accomplish, but this doesn't work. :( Any ideas users?

Answer 1

What you need to do is set which property you want to transistion properly. Currently you have it as "all" but it needs to be either "background-color" or "border-color" based on which you want to be transitioned.

 transition: border-color 1s ease;  

http://jsfiddle.net/u3Ahk/

Answer 2

You can do border effect in a lots of way. Apply the below css to the class which you gonna apply border effect and change the border style on any event occurs.

 -webkit-transition:  border 3s ease;
 -moz-transition:  border 3s ease;
 -o-transition:  border 3s ease;
 -ms-transition: border 3s ease;
 transition: border 3s ease; 

Also refer these links for advance border effects

https://codepen.io/giana/pen/yYBpVY

http://cssdeck.com/labs/10-crazy-effects-with-css3-border-transitions