BloGGood.ru

Блог Костаневича Степана

WordPress, PHP, HTML, CSS, Windows

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

Главная » Эффекты для сайта » При наведении на текст, появляется скрытый текст или картинка. Пример на CSS

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

2015-12-23 / Вр:01:13 / просмотров: 40145

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

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

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

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

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

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

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

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

<a href="#" class="bloggood-ru-ssilka">Плиз! Наведи на меня курсор</a>
<div class="bloggood-ru-div">Спасибо! Ты крут!:)</div>

В CSS:

.bloggood-ru-div
{
display: none;
}
a.bloggood-ru-ssilka:hover+div
{
display: block;
}

Готовый код:

<html>
<head>
<title>При наведении на текст, появляется скрытый текст - BlogGood.ru</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
.bloggood-ru-div
{
display: none;
}
a.bloggood-ru-ssilka:hover+div
{
display: block;
}
</style>
</head>
<body>
<a href="#" class="bloggood-ru-ssilka">Плиз! Наведи на меня курсор</a>
<div class="bloggood-ru-div">Спасибо! Ты крут!:)</div>
</body>
</html>

[посмотреть результат]

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

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

<a href="#" class="bloggood-ru-ssilka">Плиз! Наведи на меня курсор</a>
<div class="bloggood-ru-div"><img src="/wp-content/themes/bloggood/images/RSS-email.png"></div>

В CSS:

.bloggood-ru-div
{
display: none;
}
a.bloggood-ru-ssilka:hover+div
{
display: block;
}

Готовый код:

<html>
<head>
<title>При наведении на текст, появляется скрытый текст - BlogGood.ru</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
.bloggood-ru-div
{
display: none;
}
a.bloggood-ru-ssilka:hover+div
{
display: block;
}
</style>
</head>
<body>
<a href="#" class="bloggood-ru-ssilka">Плиз! Наведи на меня курсор</a>
<div class="bloggood-ru-div"><img src="/wp-content/themes/bloggood/images/RSS-email.png"></div>
</body>
</html>

[посмотреть результат]

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

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

<a href="#" class="bloggood-ru-ssilka">Плиз! Наведи на меня курсор</a>
<div class="bloggood-ru-div">Спасибо! Ты крут!:)</div>

В CSS:

.bloggood-ru-div
{
display: block;
}
a.bloggood-ru-ssilka:hover+div
{
display: none;
}

Готовый код:

<html>
<head>
<title>При наведении на текст, появляется скрытый текст - BlogGood.ru</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
.bloggood-ru-div
{
display: block;
}
a.bloggood-ru-ssilka:hover+div
{
display: none;
}
</style>
</head>
<body>
<a href="#" class="bloggood-ru-ssilka">Плиз! Наведи на меня курсор</a>
<div class="bloggood-ru-div">Спасибо! Ты крут!:)</div>
</body>
</html>

[посмотреть результат]

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

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

<a href="#" class="bloggood-ru-ssilka">Плиз! Наведи на меня курсор</a>
<div class="bloggood-ru-div"><img src="/wp-content/themes/bloggood/images/RSS-email.png"></div>

В CSS:

.bloggood-ru-div
{
display: block;
}
a.bloggood-ru-ssilka:hover+div
{
display: none;
}

Готовый код:

<html>
<head>
<title>При наведении на текст, появляется скрытый текст - BlogGood.ru</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
.bloggood-ru-div
{
display: block;
}
a.bloggood-ru-ssilka:hover+div
{
display: none;
}
</style>
</head>
<body>
<a href="#" class="bloggood-ru-ssilka">Плиз! Наведи на меня курсор</a>
<div class="bloggood-ru-div"><img src="/wp-content/themes/bloggood/images/RSS-email.png"></div>
</body>
</html>

[посмотреть результат]

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

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

6 Ответов на комментарий - При наведении на текст, появляется скрытый текст или картинка. Пример на CSS

  1. Дима

    Скажите, а возможно сделать появление картинки при наведении на текст, только что бы текст был не ссылкой?

  2. Avatar photo Степан => автор блога

    Да, можно:

    <html>
    <head>
    <title>При наведении на текст, появляется скрытый текст - BlogGood.ru</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style>
    .bloggood-ru-div
    {
    display: none;
    }
    p.bloggood-ru-ssilka:hover+div
    {
    display: block;
    }
    </style>
    </head>
    <body>
    <p class="bloggood-ru-ssilka">Плиз! Наведи на меня курсор</p>
    <div class="bloggood-ru-div">тут картинка</div>
    </body>
    </html>
    
  3. Владимир

    Скажите, а можно ли на WP сделать такое – при наведении курсора на миниатюру картинки поста выводилось description статьи? То есть не прописывать отдельно текст для каждой миниатюры, а чтоб оно автоматически бралось из записи и выводилось на hover. Спасибо.

  4. Avatar photo Степан => автор блога

    Конечно можно, но я не знаю какой плагин Вы используете, для вставки description в статьи

  5. Евгений

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

  6. Avatar photo Степан => автор блога

    какой код используете?

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

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Метки: , , , ,

Мои цели на 2018-2019:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Создать портфолио и мини интернет-магазин шаблонов

4). Довести количество статей до 800

5). Добиться посещаемости 3000 человек/сутки

6). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 810
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4716