Reduce the width of the border - html

Question

I'm trying to do a simple animation using only css. The idea is that when I hover a social icon it will seem like it's lifting up. I managed to do that but now i want to use "border" to seem like it's the icon's shadow. I reduced the thickness of the border on hover but I wanted to make it seem more realistic and somehow reduce the width of the border when hovering over. Any ideas?
Here is my fiddle: http://jsfiddle.net/Iulius90/sck4Lzz9/
html
<div>
<img src="http://fc05.deviantart.net/fs70/f/2012/204/7/b/logo_skype_by_jackal807-d58ctxc.png">
</div>
css
div {
width:200px;
height:200px;
background-color:tomato;
}
img {
width: 100px;
height:100px;
margin: 50px;
border-bottom: 3px solid #222;
transition: all 0.35s ease;
}
div img:hover {
margin-top: 22px;
padding-bottom:28px;
border-bottom: 1px solid #222;
transition: all 0.35s ease;
cursor: pointer;
}

Answer 1

You can simply use a solid linear gradient as a background image, and manipulate its dimensions upon hover. Note: You might want to use vendor prefixes to generate CSS gradients that are cross browser compatible.
img {
background-image: linear-gradient(to top, rgba(0,0,0,.5) 0%, rgba(0,0,0,.5) 100%);
background-position: center bottom;
background-repeat: no-repeat;
background-size: 100% 3px;
width: 100px;
height:100px;
margin: 50px;
transition: all 0.35s ease;
}
div img:hover {
background-size: 50% 1px;
margin-top: 22px;
padding-bottom:28px;
transition: all 0.35s ease;
cursor: pointer;
}
http://jsfiddle.net/teddyrised/sck4Lzz9/26/