Hover css img: How To Create Image Hover Overlay Effects

Разное 

Показывать изображение при наведении — HTML и CSS — Форумы SitePoint

nikostzounakos 1

Здравствуйте!

Я пытаюсь сделать эффект, при котором фоновое изображение будет открываться при наведении на него курсора.
Проблема в том, что я хочу сделать это для определенной области, а не для полного окна просмотра.
Фоновое изображение абсолютного элемента с фиксированным фоном, оно автоматически занимает весь экран. Поэтому я пытаюсь ограничить его внутри определенного div.
Весь эффект должен происходить для определенного div.

Много чего перепробовал, но не получается.

Вот пример, которому я следую: https://codepen.io/suez/pen/PwKZwO

Я не уверен, что это лучший способ, или есть какие-то альтернативы.

Спасибо за любую помощь!

м_хатли

8 марта 2021 г. , 15:07 2

if (e.pageX < какое-то число || e.pageX > какое-то другое число || e.pageY < какое-то число || e.pageY > какое-то другое число) { return; }
?

1 Нравится

ПолОБ 3

никостзунакос:

или есть любые альтернативы.

Если я правильно понимаю, я думаю, что вы можете просто скрыть переполнение в div, используя только css, что должно дать желаемый эффект…

Возможно, я неправильно понял

3 отметок «Нравится»

4

О да, это так просто

Но чтобы покрыть эту коробку, нужно полное изображение. Итак, я думаю, я мог бы исправить это с помощью background-position?

ПолОБ

8 марта 2021 г., 18:18 5

никостзунакос:

Но для этого ящика нужно полное изображение.

Я не совсем понимаю, что вы имеете в виду?

Хотите черный ящик, показывающий все изображение при наведении? Если да, то для этого вам вообще не нужен JS.

напр.

Однако я думаю, что вы имеете в виду нечто более сложное.

никостзунакос 6

Да

Коробка должна содержать изображение, но оно покажет только ту часть, на которую я навел курсор, это более понятно?

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

ПолОБ

7

никостзунакос:

но полного образа в коробке не было,

Ах, хорошо, я думаю, вы имеете в виду что-то вроде этого 🙂

Редактировать:

На самом деле я думаю, что это работает только при центрировании окна. L давайте задумаемся об этом на минутку 🙂

PaulOB 8

Хорошо. Если я понимаю, что вам нужно целое изображение в div, то вы не можете использовать фиксированный трюк с прикреплением фона, потому что фиксированные фоны всегда относятся к области просмотра.

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

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

Я уверен, что один из гуру JS, наблюдающих здесь, мог бы сделать это за вас, но решение css может быть проще в зависимости от вашего варианта использования. Вместо того, чтобы показывать изображение в круге, давайте вместо этого сотрим все, что находится за пределами круга, с помощью box-shadow, и тогда нам вообще не нужно ничего иметь в круге, поскольку вы увидите фон под ним.

Вот доказательство концепции.

2 лайков

PaulOB 9

ПолOB:

Я уверен, что один из JS

Вот версия, использующая JS для определения background-position круга, а не метод стирания, о котором я упоминал выше.

Я думаю, что версия css немного более плавная, потому что она не манипулирует фоновым положением как таковым и не требует перерисовки.

2 лайков

10

Решение с box-shadow — отличная идея.

Одна вещь, которую я пытаюсь сделать, заключается в том, что когда курсор перемещается за пределы div, круг будет следовать за ним — каким-то образом скрывать/исчезать, потому что теперь он застрял там.

ПолОБ 11

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

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

Я посмотрю завтра, если кто-то не прыгнет первым

1 Нравится

ПолОБ 13

Никостзунакос:

круг будет следовать — скрыть

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

напр.

Это доказательство концепции, мне нужно будет доработать ее позже

2 лайков

9 марта 2021 г. , 10:46 14

Да, это хорошо.

Я не уверен, почему круг не по центру

PaulOB 15

никостзунакос:

Я не уверен, почему круг не в центре

Да, это то, что я имел в виду

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

Я вернусь через пару часов

1 Нравится

ПолОБ 16

Вместо этого я заменил его на затухание, теперь все работает нормально

3 отметок «Нравится»

17

Хорошо, я проверю этот, он выглядит великолепно!

1 Нравится

система Закрыто 18

Эта тема была автоматически закрыта через 91 день после последнего ответа. Новые ответы больше не допускаются.

Фокус изображения Эффект наведения CSS

Gadgetronicx > Веб-дизайн > Фокус изображения CSS эффект наведения