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

Пожалуйста, перейдите на мой сайт здесь:

http://35.232.230.0:81/

Вы увидите таблицу элементов каталога. Наведите курсор на одно из изображений. Вы должны увидеть увеличенное изображение.

Вы также можете заметить, что изображение немного мерцает. Это происходит, когда вы наводите указатель мыши на верхнюю часть миниатюры.

Причина, по которой это происходит, заключается в том, что, как вы заметите, верхний край увеличенного изображения находится примерно посередине миниатюрного изображения. Это означает, что когда изображение увеличивается, мышь располагается прямо над увеличенным изображением. Это означает, что как только вы переместите мышь, она обнаружит это как событие mouseout, из-за чего изображение снова сожмется. Но это, в свою очередь, вызывает увеличение, потому что мышь все еще находится над миниатюрой изображения. Это приводит к циклу увеличения и уменьшения, который, если смотреть очень быстро, дает вам мерцание.

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

Событие наведения вызывает переход css, когда класс, на который выполняется переход, устанавливает положение изображения в абсолютное:

img {
    transition: width 0;

    &:hover {
        position: absolute;
        z-index: 100;
        width: 300px;
        border: 1px solid black;
        box-shadow: 5px 5px 10px grey;

        transition: width .2s linear;
    }
}

Я бы попытался настроить верхнее свойство увеличенного изображения, установив для него значение 0, но с position: absolute это просто приводит к тому, что изображение размещается в верхнем левом углу экрана. Я не уверен, как рассчитать позицию в CSS относительно содержащего его элемента (td в угловой матовой таблице), поэтому я немного не понимаю, как это сделать.

Любая помощь приветствуется. Спасибо.


transition css absolute position mat-table
person gib65    schedule 18.12.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Во-первых, для position: absolute для достижения желаемого эффекта вам нужно иметь позиционированный родитель, к которому он может относиться (все, что не является position: static).

Это означает, что установка position: relative для содержащего <td> должна работать. Но увы, это не так. :( Это связано с тем, что относительное положение в ячейках таблицы не определено и большинство браузеров не очень хорошо с этим справляются.

Итак, лучше всего обернуть изображение <div> (или чем-то подобным) с набором position: relative, как в следующем примере.

table {
  border-collapse: collapse;
}

table th,
table td {
  padding: 5px;
}

table td {
  border-top: 1px solid;
}

div {
  height: 100px;
  position: relative;
  width: 100px;
}

img {
  border: 1px solid transparent;
  height: auto;
  position: absolute;
  transition: width .2s linear;
  width: 100px;
  z-index: 100;
}

img:hover {
  border-color: #000;
  box-shadow: 5px 5px 10px grey;
  width: 400px;
  z-index: 110;
}

        
<table>
  <tr>
    <th>Name</th>
    <th>Image</th>
    <th>Description</th>
  </tr>
  <tr>
    <td>Name</td>
    <td>
      <div>
        <img src="https://dummyimage.com/400x400/f48224/fff" alt>
      </div>
    </td>
    <td>Description</td>
  </tr>
  <tr>
    <td>Name</td>
    <td>
      <div>
        <img src="https://dummyimage.com/400x400/f48224/fff" alt>
      </div>
    </td>
    <td>Description</td>
  </tr>
  <tr>
    <td>Name</td>
    <td>
      <div>
        <img src="https://dummyimage.com/400x400/f48224/fff" alt>
      </div>
    </td>
    <td>Description</td>
  </tr>
</table>

Другим решением может быть работа с преобразованиями CSS (scale), поскольку они не изменяют поток документа элемента.

person maryisdead    schedule 18.12.2019
comment
Великолепно! Это решение сработало. Спасибо, maryisdead. - person gib65; 18.12.2019