Блог

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

У меня нет возможности изменять html или использовать javascript, поскольку я изменяю css страницы.

Это элементы, с которыми я работаю.

 <tbody class="list-item" style="">
    <tr class="list-table-data">
        <td class="data number"/>
        <td class="data image">
            <a class="link sort">
                <!--What I want to enlarge-->
                <img class="hover-info image">
            </a>
        </td>
    </tr>
</tbody>
  

Я перепробовал множество комбинаций ::before и селекторов, чтобы заставить его работать. Часто результат просто оставляет мерцание.

Возможно ли это сделать с помощью чистого css?

Возможный путь для продолжения — использовать position: relative; и z-index: -1; .image и сохранить :hover псевдокласс включенным .link . Я настроил демонстрацию здесь: http://codepen.io/anon/pen/BLwPEY

Я беру на себя некоторые вольности со стилями, но просто в демонстрационных целях.

Я не уверен, каким вы хотите, чтобы результат был (например, изображение остается центрированным или точно, как изменяется размер изображения), но это может быть началом. Обратите внимание, что эффект кажется сбивчивым (по крайней мере, для меня) при наведении курсора мыши выше или ниже — если вы быстро выводите курсор, но затем останавливаетесь на краю изображения, состояние наведения, похоже, сохраняется. Не уверен, почему, и я пробовал несколько разных способов устранения неполадок, но безуспешно.

В любом случае, это может быть началом.

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

Редактировать: Извините, я неправильно прочитал ваш пост и пропустил тот факт, что вы можете использовать только CSS для выполнения. Я скорректировал свое решение, чтобы оно работало в рамках вашего существующего ограничения. Техника аналогична, родительский a элемент использует z-index «поверх» img . Я добавил границу a , чтобы вы могли видеть, что она остается того же размера даже при увеличении дочернего img элемента при наведении курсора a .

Будет ли это работать для вас?

 a.link > img.hover-info {
  width: 135px;
  height: 155px;
  transition: 500ms;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -999;
}

a.link {
  display: block;
  width: 135px;
  height: 155px;
  border: 1px solid #000000;
  z-index: 999;
}

a.link:hover > img.hover-info {
  width: 270px;
  height: 310px;
}  

 <table>
  <tbody class="list-item" style="">
    <tr class="list-table-data">
        <td class="data number"/>
        <td class="data image">
            <a class="link sort">
                <!--What I want to enlarge-->
                <img src="https://en.wikipedia.org/static/images/project-logos/enwiki.png" class="hover-info image">
            </a>
        </td>
    </tr>
  </tbody>
</table>