iBird Rose

у тебя все работает как нужно. просто ты не видишь этого, потому что иконки у тебя тоже белые. ты ж их черными не делаешь нигде.

это обычное размытие. в идеале именно макет должен выдаваться без размытия, но в таком виде макет выглядит очень убого. Вот прмиер:

Но при верстке этого размытия нет. (нет. оно конечно есть. и даже отличается у разных браузеров), но именно в самой верстке их не применяют. Значит размытые пиксели не нужно учитывать.

https://jsfiddle.net/f9z54btn/1/

тк обработай hover на родителе этих обоих дивов. типа:

.wrapper:hover .div1 {}
.wrapper:hover .div2 {}

обернуть во что-то и дать этой обертке text-align: center;

left: 50%;
transform: translateX(-50%);

https://jsfiddle.net/j3suj624/

div{
  width:144px;
  word-break: break-word;
}

https://codepen.io/LukasHaring/pen/wedgb
https://codepen.io/hermanwikner/embed/evXZQB?heigh...
ну и тут поищи: https://codepen.io/tag/particles/

возьми любой слайдер и поставь на картинки тот же fancybox к примеру fancyapps.com/fancybox/3

ну тк отлавливай ховер на .button