Прикрепите изображение к центральной странице, где строки таблицы пересекаются без медиазапросов.

Question

https://jsfiddle.net/ze5k4cqb/ Как я могу переопределить центр страницы с изображением, где линии таблицы пересекают их?Это можно сделать без медиазапросов?С медиа-запросами, то есть с процентами по полям, как это

        -webkit-margin-end: -15%;
        -webkit-margin-before: -6%;
        left: 40%;
        top: 40%;
        right: 40%;

, он не работает с другими настройками разрешения.Есть ли уловка, чтобы сделать это без 3000 строк медиа-запросов?

Answer 1

Классная анимация при наведении.Все, что я могу сказать, это то, что transform: translate твой друг.У вас была какая-то странная отрицательная разница, поэтому мне пришлось учесть это с помощью функции calc в переводе.

Я также добавил pointer-events: none, чтобы вы могли запускать анимации квадранта, даже если вы наводите курсор над .logo-div.

#container {
  position: relative;
}

.logo-div {
  left: 50%;
  top: 50%;
  width: 30%;
  transform: translate(calc(-50% - 15px), -50%);
  position: absolute;
  z-index: 100;
  display: flex;
  pointer-events: none;
}