Как вывести изображение в отдельный div при наведении курсора мыши на div, используя только CSS?

Question

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

Answer 1

Pure CSS Popups2 , с того же сайта, который приносит нам Complexspiral. Обратите внимание, что в этом примере используются фактические навигационные ссылки в качестве пролонгированного элемента. Если вы этого не хотите, это может привести к некоторому затруднению в отношении версий IE.

Основной метод - прикрепить каждое изображение внутри тега ссылки с фактической ссылкой (в противном случае некоторые версии IE будут игнорировать: hover)

<a href="#">Text <img class="popup" src="pic.gif" /></a>

и расположите его с умом, используя абсолютную позицию. Спрятать изображение изначально

a img.popup { display: none }

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

a:hover img.popup { display: block }

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

Answer 2

CSS Playground использует чистый CSS для этого типа вещей, одна из демонстраций, безусловно, поможет вам, и, поскольку это всего лишь CSS, просто просмотрите исходный материал для изучения - вы, вероятно, захотите использовать псевдокласс: hover но есть ограничения к нему в зависимости от ориентации вашего браузера.

Answer 3

Вот несколько примеров:

• Галерея изображений CSS
• Многостраничная галерея фотографий с несколькими браузерами
• Галерея изображений только для CSS: Объяснено
• Галерея изображений только для CSS: Пример

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

Answer 4

Эрик Мейер Pure CSS Popups 2 демо звучит достаточно похоже на то, что вы хотите.