Что делает знак тильда(~) в css?

Селектор для img, перед которым (в том же родителе) есть button, над которым находится мышь.

https://www.w3schools.com/cssref/sel_gen_sibling.asp

button:hover ~ img {
   margin-left:800px;
   transition:10.0s;
}

<button>Button</button><span>AAA</span><img src="aaa.jpg" alt="ABCD" />

http://htmlbook.ru/css/selector/sibling это называется родственные селекторы. Стиль будет применен к картинке которая находится на одном уровне с button и идет после него.