Всплывающая картинка при наведении на ссылку на CSS

Апрель 26, 2013   Александр Маврин   29 комментариев

Всплывающая картинкаЗдравствуйте, друзья! На моем блоге уже есть информация о всплывающих подсказках на CSS, но сегодня будем делать еще более интересный эффект, это всплывающие картинки при наведении курсора. Этот эффект имеет достаточно широкое применение, но я все чаще замечаю подобное на интернет-магазинах, где при наведении на название товара, появляется его изображение или же увеличение картинки при наведении. Конечно такие эффекты можно разнообразить с использованием JavaScript или jQuery, но мы с вами воздержимся от всевозможных скриптов и будем делать всплывающие картинки только на CSS. Надеюсь, что вы уже знаете, что такое псевдокласс hover. Вот Его-то мы и будем использовать в наших всплывающих картинках и вот, что у нас должно получится.

Демо

Первое, что нужно сделать, это добавить в файл стилей следующий код:

1
2
3
4
5
6
7
8
9
10
11
12
13
.tooltip span{
    border-radius: 5px 5px 5px 5px;
    visibility: hidden;
    position: absolute;
    left: 200px;
    background: #fff;
    box-shadow: -2px 2px 10px -1px #333; 
    border-radius: 5px;	
}
 
.tooltip:hover span{
visibility: visible;
}


Теперь, к ссылкам нужно прописать класс tooltip и в теге span разместить ссылку на картинку. Выглядит это вот так:

<a class="tooltip" href="#">Анкор ссылки<span><img src="image.png"/></span></a>

С абсолютным позиционированием могут возникнуть проблемы, если вы делаете эффект всплывающих изображений к разным элементам на странице. Картинки могут всплывать не в том месте, где вам нужно. Но это вполне поправимо и можно исправить при помощи отступов. Ну вот, теперь вы знаете как сделать увеличение картинки при наведении мыши с помощью CSS. Используйте данный код для экспериментов, возможно что-то интересное у вас все же получится. при помощи CSS еще можно сделать таблицу зебру. Все вопросы о том, куда вставлять код и т.п. — писать в комментариях. 🙂 А еще я попрошу вас поделиться этой записью в социальных сетях. Заранее благодарю.

Не стесняйтесь делиться записью в социальных сетях. Спасибо


29 комментариев
  1. Александр, 2 вопроса:
    1. Возможно ли это сделать в вордпрессе?
    2. Если да, то почему Вы сами этого не делаете?

    • 1. Возможно сделать где угодно
      2. Пока нет в этом необходимости.
      Если бы я все примеры применял на блоге, то во-первых файл стилей весил бы несколько мегабайт, что отрицательно сказалось бы на скорости загрузки страниц и во-вторых — блог выглядел бы как новогодняя елка. 🙂

  2. Сделайте, пожалуйста, пример всплывающей картинки в статье.

  3. Александр, нет ли плагина подобного?

  4. Андрей Александрович:

    Как сделать что-то подобное для ячейки таблицы? Чтобы при наведении курсора на ячейку (td), всплывало изображение, как в Вашем примере. Поясню:

    Имеется список товаров табличного вида с колонками артикул, наименование с картинкой, и т.д.

  5. Андрей Александрович:

    Подумал и понял, как реализовать свою задумку сам =) По сути, то же самое, что и в данной статье. Только создаем мы .имя_класса_ячейки_td span {…} и .имя_класса_ячейки_td:hover span {…}

    А в конце содержимого ячейки я просто вывел тот самый span, а в него поместил вывод изображения. Спасибо за статью, сохраню в Evernote. 😉

  6. Андрей Александрович:

    Кстати, еще советую в Ваш код добавить z-index, т.к всплывающее изображение где-то на сайте может оказаться под каким-либо элементом.

  7. NFS:

    gtauniverse.ucoz.ru у меня на сайте получилось криво. Блок «Популярные файлы для GTA»

  8. NFS:

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

  9. Джигурда:

    Спасибо! 😈

  10. Galoshka:

    Вот спасибо. Не могла найти что-то подобное, хотя ваш сайт был в закладках. Как раз то, что мне нужно.

  11. Большое спасибо, Александр!

  12. Paul:

    Ogromnoe spasibo! Vse zarabotalo. ➡

  13. Александр:

    Огромное спасибо за этот чудесный материал! А не могли бы Вы мне подсказать как можно всплывающее изображение сместить вверх или вниз?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *