Всплывающие картинки на тексте. HTML и СSS

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

Тут такое дело вырисовывается - при настройке сайта вдруг захотелось сделать некоторую фишечку - чтобы при наведении курсора мыши на некую ссылку, рядышком выскакивала картинка с определенной эмоцией. Как это сделать, не используя JavaScript?

Итак, с чего начнем? Первым делом, необходимо определить стиль будущей всплывающей картинки, а это значит, что нам - в CSS, при помощи которого настраиваются основные стилевые моменты!

Меняем свойства CSS

Заходим в соответствующий файл (часто, он называется Style.css, если вы работаете с CMS) и создаем специальный стиль. Назовем его, скажем, tooltip

.tooltip span{
border-radius: 5px 5px 5px 5px;
visibility: hidden;

visibility: hidden; - скрывает картинку, пока не будут сделаны действия.

position: absolute;
right: 100px;

Определяем местоположение будущей всплывающей картики. Absolute говорит о том, что положение элемента будет установлено относительно его исходного места в коде, при этом другие элементы отображаются на веб-странице словно нашего элемента и нет. Добавление свойств lefttopright и bottom изменяет положение элемента и сдвигает его в ту или иную сторону, что нам и требуется. Также на положение влияет значение свойства position родительского элемента. Так, если у родителя значение position установлено как static или родителя нет, то отсчет координат ведется от края окна браузера. Если у родителя значение position задано как fixedrelative или absolute, то отсчет координат ведется от края родительского элемента.

В данном случае, сдвиг определим на 100 пикселей.

background: #fff;
box-shadow: -2px 2px 10px -1px #333;
border-radius: 5px;
}

Эта часть кода уже занята оформлением  фона, тени, границы и так далее. В данном случае, нам не столь важно. Наконец, необходимо прописать, что случится с элементом, когда на него будет наведена мышь. Таким образом, нам необходимо лишь внести изменения относительно его видимости. И сделать это можно таким образом:

.tooltip:hover span{
visibility: visible;
}

Для удобства, представлю уже разобранный код целиком:

.tooltip span{
border-radius: 5px 5px 5px 5px;
visibility: hidden;
position: absolute;
right: 100px;
background: #fff;
box-shadow: -2px 2px 10px -1px #333;
border-radius: 5px;
}

.tooltip:hover span{
visibility: visible;
}

Вставляем ссылку

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

И что же следует делать? А просто указать в ссылке на применяемый стиль

<a class="tooltip" href="ссылка на страницу(или # если она не нужна)" title="всплывающее при наведении мышки">текст ссылки<span><img src="https://путь до картинки" alt=" " /></span></a>

Наконец, попробуем разобрать представленный выше код

Вместо стандартного <a href= , добавляем указание на наш стиль, который мы создали в нашем CSS файле, т. е. это участок

<a class= "tooltip" href=

Если вы задались вопросом, который мы рассматриваем тут, то назначение атрибутов href и title не должны вызывать у вас вопросов, так как это совсем уж базовые понятия HTML.

Осталось только добавить ссылку на нашу картинку. Делается это внутри <span> при помощи <img src

Применение

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

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