Уменьшить ширину границы

Question

Я пытаюсь сделать простую анимацию, используя только css. Идея состоит в том, что когда я нахожу социальную икону, она будет казаться, что она поднимается. Мне удалось это сделать, но теперь я хочу использовать «границу», чтобы казаться, что это тень значка. Я уменьшил толщину границы при наведении, но я хотел, чтобы это выглядело более реалистичным и каким-то образом уменьшало ширину границы при зависании. Есть идеи? Вот моя скрипка: 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

Вы можете просто использовать твердый линейный градиент в качестве фонового изображения и манипулировать его размеры при наведении курсора мыши. Примечание. Возможно, вы захотите использовать префиксы поставщиков для генерации градиентов CSS, совместимых с кросс-браузером.

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/