shmatuan

По запросу "hexagon css with image" много всего есть)
jsfiddle.net/kizu/bhGn4

Через WebGL только (можно https://threejs.org/ )

https://threejs.org/examples/webgl_fire.html
https://www.youtube.com/watch?v=jKRHmQmduDI
ghostinthecode.net/2016/08/17/fire.html
и т.д.

По описанию похоже на transition: 0.3s all;

UPD:
content-section содержит в себе 2 блока, которые занимают по половине ширины, поэтому profile только на второй половине

Как пример можно так (но всё зависит от того как использовать):

#particles-js {
flex: 0;
/*или сделать его position: absolute;*/
}
.profile {
width: 100%;
flex: 1;
}

1. Можно progressive JPEG использовать - будет и оптимизация размера и постепенная загрузка (ч/б крупные пиксели, потом постепенное улучшение качества)
https://www.jpeg.io/

2. Разделить картинку на составляющие и грузить отдельно (большая чась - синий фон, например, можно и так сделать)

Код скринами .-.
есть специальный тег code в составлении вопроса)

По сути вопроса - просто добавить div с position: absolute, где будет полупрозрачный фон и иконка, в стилях по наведению делать его видимым.
https://codepen.io/littlesnippets/pen/pjqaOx
https://codepen.io/littlesnippets/pen/LGpgGJ

https://codepen.io/andreysh/pen/rPNzYQ

1. .class1 a, .class2 a, class3 a { - это вполне себе правильно
2. как вариант

<a class ="mainstyle class1"> </a>
<a class ="mainstyle class2"> </a>
<a class ="mainstyle class3"> </a

.mainstyle { font-size: 12px; }
.class1 { color: red; }
.class2 { color: green; }
.class3 { color: blue; }

3. Задать общий стиль всем a { font-size: 12px; }

Скорее всего из-за того, что при нажатии на кнопку в url добавляется #modal и по этому url смотрит js код
Когда нажимаешь назад - браузер возвращает url с #modal и поэтому она открывается опять.
Лучше взять просто другую модалку

<a href="#modal">

Если рулетка внизу страницы, то можно самую длинную картинку оставить видимой на всю страницу и сделать фиксированной саму рулетку - и тогда без js при скроле будет выглядеть как разматывание)
https://codepen.io/andreysh/pen/gQjJgx

.class > h1, .class > h2, .class > p {style}
только + что .class > будет брать только первые вхождения классов, что не совсем подходит для " нескольких элементов внутри одного класса"