[Помогите] Картинка с наложенным border и с сдвигом в сторону

Доброго времени суток! Подскажите как решить такую задачку. Есть картинка и поверх ее с наложением идет border, но помимо этого он как бы имеет размер картинки но со сдвигом. Вот для наглядности: http://joxi.ru/bmoVpZZsxM3dbr

Подобный вариант нашел на данном сайте: http://www.l-invest.ru/contact/ - но тут как бы с анимацией идет, она прорисовывается по кругу. Пробовал повторить за ними с анимацией, но без вариантов. Может еще какие скрипты для прорисовки используются? Или какая библиотека.

 

доброго на сайте бордер реализован с помощью 4-x блоков по 2px, а бегущую полоску создает анимированный градиент

 

ну анимация не нужна... но вариант интересный разобраться для себя не помешало бы! Если понимаете как, то подскажите в каком нибудь генераторе может. По поводу задать 4 border по 2px не проблема, а вот как это все симметрично сдвинуть относительно картинки и так чтобы это все было адаптивно?

 

https://jsfiddle.net/Lvj1a1h2/ вот например с hover срабатывает при наведении

 

Круто! Надо изучать анимацию с CSS! Может что посоветуешь?
Я немного доработал, чтоб было резиной. А допустим как на скрине первом чтоб border на фоне картинки имел белый цвет - это реально сделать?

 

C js у меня совсем плохо, а с белым цветом все тоже + 2блока https://jsfiddle.net/Lvj1a1h2/3/

 

все гораздо проще чем кажется... Это видимо из-за того, что у меня еще знаний маловато. С js у меня тоже плохо :( Я имел ввиду может подскажешь что почитать по html css? а то с анимацией вообще не знаком толком

 

Здесь на сайте в варезнике можно найти видеокурсы по html css, а для общего развития сайт http://css.yoksel.ru/about-animation/ много интересных фич.