обычный span который расположен через absolute. и меняет свои left: и top:
границы по которым можно двигать этот спан просчитываются через js
даже codepen нагуглил. правда костыльный. но метод реализации по нему понять можно. https://codepen.io/anon/pen/EVMwWR
а что ты хочешь? выполнение твоего скрипта ничего не тормозит. т.е. он работает пока оперативка не забьется. а из за такой скорости выполнения - она забивается очень быстро.
поставь к примеру таймаут в 1 секунду. тогда не будет тормозить.
какая разница на чем написан imagemin - он просто сожмет твои картинки. никуда на сайте и в твоем проекте файлы imagemin'a подключать тебе не придется.
зависит от ситуации. к примеру такое используется в модалках. в модалках правильным решением будет - создавать фон за модалкой и уже вешать закрытие модалки по клику на этот фон.
но и вешать клик на document (хоть и считается не правильным) - это не смертельно. на работу других скриптов это не повлияет.
ставишь блок с соц сетями на это место абсолютом к примеру. даешь блоку opacity: 0;
при ховере даешь opacity: 1;
или visibility: hidden; и visibility: visible;
