Border-bottom transition ease in and out

[Travercraig]

Basically I'm trying to make it so that when you hover over the social media icons the red bottom border eases both in and out, currently it only eases in and instantly hides when I hover away. I'd like it so it also eases out the same as it does in. It's odd because it seems to work fine with background colour transitions. But this border bottom doesn't seem too. Here is a fiddle of what I currently have. I'll also provide a code snippet below:

<footer>                                                <p>Created By © GR412 2015</p>      <div id="social-container">                                                                                                         <a href="https://www.youtube.com/user/GR412" target="_blank">      <img src="images/CRAFT412 - YouTube Button.png" alt="YOUTUBE ICON"></a>                                                                                                                                                                              <a href="http://www.twitch.tv/gr412" target="_blank">      <img src="images/CRAFT412 - Twitch Button.png" alt="TWITCH ICON"></a>                                                                                                                                         <a href="https://twitter.com/GR412" target="_blank">      <img src="images/CRAFT412 - Twitter Button.png" alt="TWITTER ICON"></a>                                                                                                                                        <a href="https://www.facebook.com/GR412" target="_blank">      <img src="images/CRAFT412 - Facebook Button.png" alt="FACEBOOOK ICON"></a></div>                                                                                                                                                                                                                                   </footer>

footer {height: 45px;        background: white;        margin: 20px 0 20px 0;        border-radius: 5px;        box-shadow: 0px 1px 3px 0px;        color: #BDBDBD;        line-height: 45px;        position: relative;}footer p {line-height: 45px;          display: inline;}#social-container {float: right;                   margin: 0 5px 0 5px;}#social-container a {float: left;}#social-container img {height: 39px;                       padding: 3px;                       transition: all 0.35s ease;}#social-container img:hover {border-bottom: 3px solid #C62828;                             padding-bottom: 0;}

[Mr_KoKa]

I guess: https://jsfiddle.net/coy4ytLs/

 

You just need to set style of bottom border when it is not hovered. Without doing so it is none, it has to be 0 thick and has to have style (solid) and color so transition know to where back to. That is my guess, and after I set it to what I thought it seems like it works. (I just set thickness of border to 5px, you need to revert it to 3px)

[Travercraig]

I guess: https://jsfiddle.net/coy4ytLs/

 

You just need to set style of bottom border when it is not hovered. Without doing so it is none, it has to be 0 thick and has to have style (solid) and color so transition know to where back to. That is my guess, and after I set it to what I thought it seems like it works. (I just set thickness of border to 5px, you need to revert it to 3px)

Works perfectly, thanks! I'm quite new to html and css so there are many things I don't understand.