Css текст при наведении на изображение: При наведении на картинку появляется текст или кнопка. Css решение — IT портал — Независимое театральное объединение "Зрительские симпатии"

Содержание

Как сделать чтобы при наведении на картинку появлялся текст в html

Салютики!
Мне на ушко прошептал wordstat.yandex.ru, что вы ищите эффект, когда при наведении на текст появляется скрытый текст или картинка. В этой статье я не только выложу код этого эффекта, но и покажу, как сделать, чтобы при наведении текст или картинка появлялись и исчезали. Код не сложный, написан на обычном HTML+CSS.
Этот эффект можно использовать:

— если нужно вставить скрытую подсказку к слову;

— если нужно показать ответ на загадку;

— если нужно показать вариант ответа на тест;

— и другие варианты

○ При наведении на текст, появляется скрытый текст

В HTML вставьте вот этот код:

○ При наведении на текст, появляется картинка

В HTML вставьте вот этот код:

○ При наведении на текст, исчезает блок div с текстом

В HTML вставьте вот этот код:

○ При наведении на текст, исчезает блок div с картинкой

В HTML вставьте вот этот код:

Вы нашли то, что искали?! Если да, тогда в знак благодарности жмите на кнопку социальных сетей, которая размещена снизу.
Да, и подписывайтесь на обновления моего блога, здесь много вкусных тем.

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

я так понимаю это реализуется с помощью javascript?

Ссылка на комментарий

Поделиться на других сайтах

15 ответов на этот вопрос

Сортировать по голосам
Сортировать по дате

Присоединяйтесь к обсуждению

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

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

Для работы нам понадобится исполняемый файл и картинка. Код, который нужно вставить, следующий:

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

Весь Интернет перерыл, не нашел ничего толкового. Смысл прост: при наведении мышью на картинку она должна затемняться чуть-чуть. И внутри блока-картинки появлялся текст. Прошу помочь.

Пара идей для вдохновения (codrops):

Всё ещё ищете ответ? Посмотрите другие вопросы с метками html css или задайте свой вопрос.

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Как добавить рамку к изображению при наведении?

Рамка вокруг изображений делается с помощью свойства border, которое добавляется к селектору img. Чтобы рамка появлялась только при наведении курсора мыши на картинку, следует воспользоваться псевдоклассом :hover, как показано в примере 1.

Пример 1. Добавление рамки

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Рамка</title> <style> img:hover { border: 3px solid #65994C; /* Параметры рамки */ border-radius: 10px; /* Радиус скругления */ } </style> </head> <body> <img src=»image/3.png» alt=»»> <img src=»image/7.png» alt=»»> <img src=»image/ace.png» alt=»»> </body> </html>

Результат данного примера показан на рис. 1.

Рис. 1. Изображение с рамкой

Свойство border влияет на общие размеры изображения, из-за чего при наведении на картинку происходит её сдвиг. Есть несколько методов, как обойти эту особенность.

Использование outline

Свойство border заменяем на свойство outline, которое обладает схожим поведением, но не оказывает влияния на размеры (пример 2).

Пример 2. Свойство outline

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Рамка</title> <style> img:hover { outline: 3px solid #65994C; /* Параметры рамки */ } </style> </head> <body> <img src=»image/3.png» alt=»»> <img src=»image/7.png» alt=»»> <img src=»image/ace.png» alt=»»> </body> </html>

Учтите, что outline всегда выводит прямоугольную рамку, поскольку не поддерживает border-radius.

Прозрачная рамка

Устранить сдвиг картинки поможет прозрачная рамка то же толщины, что указана в border. Картинки предварительно выводим с прозрачной рамкой, а уже в :hover меняем у этой рамки цвет (пример 3). Тогда при наведении на изображение никаких смещений уже не будет. Для прозрачного цвета используем значение transparent, а цвет рамки меняется с помощью свойства border-color.

Пример 3. Прозрачная рамка

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Рамка</title> <style> img { border: 3px solid transparent; /* Прозрачная рамка */ } img:hover { border-color: #65994C; /* Цвет рамки */ border-radius: 10px; } </style> </head> <body> <img src=»image/3.

png» alt=»»> <img src=»image/7.png» alt=»»> <img src=»image/ace.png» alt=»»> </body> </html>

Результат данного примера показан на рис. 2.

Рис. 2. Изображение с рамкой

Изображения

Линии и рамки

См. также

:focus для полей формы
border
border-bottom-color

border-bottom-left-radius
border-bottom-right-radius
border-color
border-left-color
border-radius
border-right-color
border-top-color
border-top-left-radius
border-top-right-radius
outline
outline-color
outline-offset
outline-style
outline-width
Блочные элементы
Граница в CSS
Добавление треугольника
Колесо для сокращённых свойств
Круглые изображения
Открываем блочную модель
Повёрнутые рамки
Рамка вокруг изображений
Свойство border
Строчные элементы

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 25. 09.2018

Редакторы: Влад Мержевич

Создание всплывающих подсказок для изображений с помощью CSS

Введение

Каскадные таблицы стилей (CSS) используются в веб-разработке для форматирования текста веб-страницы, компоновки веб-страниц и улучшения гиперссылок. Каскадные таблицы стилей также можно использовать для создания более динамичных эффектов, таких как всплывающие подсказки, всплывающие текстовые сообщения, которые появляются при наведении курсора на элемент HTML.

Всплывающие подсказки можно создавать с атрибутом HTML title , но результирующая всплывающая подсказка остается видимой только в течение нескольких секунд и не может быть отформатирована. Всплывающие подсказки также можно создавать с помощью JavaScript и CSS, но для этого требуются продвинутые знания JavaScript. В этой статье я покажу, как использовать CSS для создания всплывающих подсказок, которые появляются при наведении курсора на изображение веб-страницы.

Техника

Наведите указатель мыши на изображение ниже. Всплывающее окно было создано с использованием только каскадных таблиц стилей.

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

Код HTML, используемый для создания этого эффекта, выглядит следующим образом: