При наведении на картинку появляется текст: html — Как сделать, чтобы при hover на картинку она затемнялась и появлялся текст внутри нее? — Независимое театральное объединение "Зрительские симпатии"

Содержание

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

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

Смотрим на примере

Допустим, у нас есть два одинаковых блока. В html разметке я предлагаю обозначить их так:

Блок 1

Блок 2

Каждый элемент получил два стилевых класса. Зачем это нужно? Первым классом мы зададим общие правила внешнего вида, блоки же одинаковые, так что их можно описать совместно. В реальном примере, скорее всего, будет по-другому. Также каждый элемент получил собственный уникальный стилевой класс. Он тоже пригодится.

Block{ font-size: 50px; width: 200px; height: 120px; background: green; margin-bottom: 30px; transition: 1s }

Этими правилами мы прописали обоим блокам одинаковый внешний вид: высоту, ширину, размер шрифта, отступ и зеленый фон. Последнее свойство transition как раз и является относительно новым и входит в версию CSS3 . Оно обозначает задержку, после которой выполняются определенные правила. По сути, именно это дает плавное появление.

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

Как реализовать в css3 плавное появление?

Дальше есть два варианта действий. Допустим, нам нужно пока скрыть второй блок, а при наведении на первый плавно выводить его. Наиболее часто для скрытия элемента применяют правило display: none , но оно не даст именно того, чего нужно – плавного появления. Элемент появится резко.

Поэтому мы поступим по-другому. Смотрите этот код:

Block2{ opacity: 0; } .block1:hover + .block2{ opacity: 1 }

Мы использовали еще одно CSS3-свойство – opacity . Оно задает прозрачность элемента, которая прописывается от 0 (полностью прозрачный) до 1 (полностью непрозрачный) элемент.

Сначала полностью убираем второй блок от глаз, делая его прозрачным. Теперь нужно сделать так, чтобы при наведении мышки на первый блок плавно появлялся второй. Для этого используется такой вот интересный комбинированный селектор.block1:hover + .block2

То есть само изменение стилей происходит при наведении на первый блок, а изменяется непосредственно второй. Благодаря прописанному ранее transition он появится не резко, а плавно, что нам с вами и нужно. Изменяя значение transition можно сделать появление более резким или наоборот еще больше замедлить его.

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

Данный эффект немного напоминает эффект, который реализован в Яндкес.Картинки . Может и большого сходства нет, но что-то похожее наблюдается.

Шаг 1. HTML-разметка

HTML-разметка очень простая. Состоит из основного блока, картинки и блока с описанием:

Wattie Buchan
The Exploited

Шаг 2. Стили основного блока

В данном шаге мы напишем стили для основного блока. Для этого создадим класс и назовем его columns :

Columns { position: relative; width: 200px; display: inline; float: left; margin: 10px; padding: 0; }

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

Шаг 3. Стили для изображения

В данном шаге мы напишем стили для изображения, которое находится внутри блока item :

Item img { position: relative; }

Шаг 4. Стили для блока с описанием

В этом шаге мы напишем стили для блока с описанием, который имеет класс info :

Info { position: absolute; left: -10px; top: -10px; padding: 210px 12px 5px 8px; width: 200px; background: #fff; display: none; box-shadow: 0px 0px 6px #7d7d7d; } .info p {font-family: Tahoma; font-size: 13px;}

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

Шаг 4. Псевдоэлемент:hover

На данном шаге мы пропишем стили для псевдоэлемента:hover. Т.е. действие, которое будет совершаться при наведении курсора на блок с картинкой:

Item:hover .info { display: block; z-index: 99; } .item:hover { z-index: 99; }

Здесь мы указали свойство display: block; . Это нужно для того, чтобы элемент появлялся при наведении на него мышью. Также мы указали значение z-index: 99.

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

Item:hover img { z-index: 999; }

Мы придали свойству z-index значение 999 . Это говорит о том, что теперь картинка находится выше всех остальных элементов. Поэтому, ее теперь будет видно при наведении мышью.

Полный код стилей

Columns { position: relative; width: 200px; display: inline; float: left; margin: 10px; padding: 0; } .item img { position: relative; } .info { position: absolute; left: -10px; top: -10px; padding: 210px 12px 5px 8px; width: 200px; background: #fff; display: none; box-shadow: 0px 0px 6px #7d7d7d; } .info p {font-family: Tahoma; font-size: 13px;} .item:hover .info { display: block; z-index: 99; } .item:hover { z-index: 99; } .item:hover img { z-index: 999; }

На этом данный урок закончен. Спасибо за внимание.

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

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

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

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

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

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

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

Плиз!! Ты крут!:)

Текст или картинка, поверх картинки! » Бит Бай

У меня недавно стал вопрос, как сделать текст поверх картинки. Тогда я мог с уверенностью сказать, что так сделать нельзя. И конечно же оказался неправ. Это реально сделать, причем не затрачивая на это много усилий! Потому что это самое простое что можно сделать..

И так, для начала создадим саму картинку.

<img src="url images" />

Есть картинка, поверха которой нужно сделать текст. Мы сделаем это с помощью “

position“. Но для начала, что оно из себя представляет.

Position – Устанавливает способ позиционирования, относительно родителя.

position: absolute; – задает абсолютное свободное позиционирование. Значения атрибутов bottom, left, right и top при этом задают абсолютные координаты элемента страницы относительно родителя.
position: relative; – задает относительное свободное позиционирование. Значения атрибутов bottom, left, right и top при этом задают смещение координат элемента страницы от точки, в которой он был отображен, будь атрибут position установлен в static.
position: static; – (значение по умолчанию) задает статическое позиционирование, при котором элемент страницы отображается внутри общего “потока” текста, т.е. не свободно. Значения атрибутов bottom, left, right и top при этом не принимаются Web-обозревателем во внимание.

Хм.. Если вы делаете только одно изображение на всю страницу, то выгодно будет пользоваться absolute, так как он позволит выбрать положение по всему экрану.
А если вам нужно будет сделать маленькую картинку в нутри тега <div> или в таблице, то лучше воспользоваться relative.

Мне нужно было сделать так как во втором примере. Делаем текст, который в дальнейшем будет находится на картинке. Вот пример:

<div><!-- Див, в ктором находится наш текст и картинка -->
<img src="logo.jpg">
<div>Текст поверх картинки</div>
</div>

После этого кода получается текст ниже картинки. Чтобы он стал на картинке, задаем ему position:relative;

<div> <img src="logo.jpg"> <div>Текст поверх картинки</div> </div>
bottom:100px; – показывает настройки расположения текста. Настраивайте под свой вкус ;).

Ну вот и все.. Надеюсь полезен был урок!

С уважением, Vasilenko Ivan!

Изображения WordPress с hover-эффектами

Hover-эффекты активно используются в современном веб-дизайне на ряду с lightnbox. Эти эффекты представляют собой изменение изображения при наведении на неё мышки. Выглядит это красиво, современно и хорошо запоминается. В этой статье мы покажем вам, как сделать такой приём с изображениями в WordPress.

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

Чтобы решить эту задачу, существует специальный плагин. Благодаря ему можно применить к изображениям WordPress hover-эффект и не затрагивать вообще программирования кодом. Познакомимся с этим инструментом поближе.

Изображения WordPress с плагином Royal Image Hover Effects

Royal Image Hover Effects – это плагин для изображений WordPress, который позволяет применить к картинкам hover-эффект или эффект при наведении. Работа плагина заключается в следующем: к каждому отдельно взятому изображению можно применить тот или иной эффект из представленных возможных, затем это изображение можно поместить в запись или на страницу с помощью шорткода. Эффект заключается в появлении надписи при наведении мышки на картинку. Пожалуй, проще некуда.

Скачайте, установите и активируйте этот плагин у себя на сайте. После этого вы увидите в консоли новый пункт «Royal Image Hover Effects». Чтобы добавить новое изображение WordPress с hover-эффектом, перейдите в подпункт «Add New Item». Здесь в вашем распоряжении будет целый набор инструментов для создания красивого и интересно изображения:

Royal hover Item. Здесь необходимо загрузить само изображение, которое будет участвовать в эффекте. Сделать это можно с помощью кнопки «Choose file». Загрузить можно из медиабиблиотеки или с компьютера. Также тут можно дать заголовки и содержание надписи, которая будет появляться при наведении мышки. Можно применить HTML-теги, поэтому есть возможность форматировать текст и создавать там ссылки.
Setting panel. Здесь у вас собраны широчайшие настройки, которые позволяют настраивать внешний вид hover-эффекта данного изображения в WordPress. Инструментов очень много, есть множество возможностей для кастомизации. Однако надо заметить, некоторая часть настроек доступна только в PRO версии.
Social style icon setting. Хоть эта секция и называется с «социальным» словом, иконки тут разнообразные. Здесь есть возможность установить какие-то небольшие иконки под описанием изображения, а также установить ссылку для каждой из них. Всего можно поставить до 4 иконок.

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

Дизайн-система в Figma. Часть 2: Кнопки | by Татьяна Маслакова. Веб дизайн

Продолжаем проектировать нашу дизайн-систему. В прошлой статье мы задали основные стили для текста, цветовую гамму нашего проекта, стили теней, а также создали компонент для плашек. Теперь пришло время поговорить о кнопках.

Проектируя кнопки, следует учесть, что они могут иметь несколько состояний:

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

Все эти состояния нам необходимо прорисовать.

Мне известны 2 основных способа создания кнопок: кнопки с использованием Auto Layout (масштабируются вместе с текстом внутри) и кнопки с оцентрированным текстом (такую кнопку можно масштабировать, текст при этом всегда будет по центру). В разных ситуациях удобны разные варианты кнопок.

Создайте прямоугольник. Задайте ему необходимый размер и степень скругления углов. Выберите цвет — цвета используйте обязательно из нашей палитры, которую мы создавали в предыдущей статье. В моем примере это будет синий цвет. Если необходимого цвета нет, создайте для него новый стиль. Это позволит в дальнейшем легко менять цветовую гамму всего проекта.

Выберите Text Tool (T) и напишите название кнопки. Задайте стиль текста, который вы определили специально для кнопок (см. предыдущую статью).

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

После этого выровняйте слой с текстом по центру относительно нашего прямоугольника. Для этого выделите оба слоя и последовательно нажмите две иконки вверху в правой панели:

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

Не снимая выделения, в правой панели ищем вкладку Auto Layout и нажимаем плюсик. Теперь, если мы захотим отредактировать текст на кнопке, размер кнопки изменится вместе с этим текстом.

Изменяя два правых параметра на вкладке Auto Layout, можно добиться нужного нам размера отступов по вертикали и горизонтали от границ текста.

Расширяем функционал кнопки

Мы также можем расширить функционал нашего компонента, например, добавить в кнопку иконку каталога или корзины, которые можно будет скрывать или показывать при необходимости.

Рисуем необходимые иконки, задаем им цвет из палитры. запаковываем в компоненты.

Внимание: важно, чтобы размеры компонентов иконок были одинаковыми. В моем случае для кнопок это поле 20×20 пикселей. Иконка внутри необязательно должна занимать все это поле, но сами компоненты должны быть идентичны по размеру.

Сгруппируйте все эти иконки у одну группу и назовите ее членораздельным именем. Чуть позже это нам пригодится.

Теперь копируем одну из иконок (Contrl+d или Comand+d) и помещаем ее внутрь компонента с нашей кнопкой перед текстом).

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

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

Наведение

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

Копируем экземпляр компонента базовой кнопки (Contrl+d или Comand+d). Не снимая выделения с компонента, задаем параметры оформления для этого состояния кнопки: можно поменять, цвет, обводку или даже добавить тень (не забудьте предварительно задать стиль для тени). Можно выделить внутри слой самого текста и поменять его параметры (к, примеру, цвет).

В моем случае было достаточно поменять стиль цвета кнопки, сделать ее немного темнее.

После этого выделяем экземпляр кнопки и снова запаковываем ее в компонент, не забываем дать имя компоненту. Таким образом мы создали компонент, который унаследовал компонент базовой кнопки. Теперь, если мы что-либо поменяем в базовой кнопке (кроме цвета, который мы переопределили, это тут же отразится на состоянии всех других, созданных таким же образом кнопок.

Активность по табу

Вновь создаем экземпляр нашей базовой кнопки.

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

Неактивная кнопка

Для кнопок, на которые еще нельзя нажать (например, не введен код, не заполнены все поля и т.д.), создадим еще один компонент.

Я решила, что такая кнопка будет иметь полупрозрачный фон, чтобы интереснее смотреться не только на белом, но и на на каком-либо неоднородном цветном фоне. Для этого мне пришлось создать новый стиль заливки цвета с прозрачностью в 15%. Также я понизила прозрачность текстового слоя внутри кнопки до 50%. И точно также, как и предыдущие состояния кнопки, запаковала все в новый компонент.

Бывают ситуации, когда необходимо очень четко вписать кнопку в сетку, либо сделать кнопку огромной — по ширине всего контента. В таких случаях Auto Layout не подойдет. Рассмотрим еще один способ создания кнопок.

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

Для текстового слоя задаем Constraints: Center, Center:

Если вы также хотите добавить в такие кнопки иконки, то текст и иконка группируются и на группу настраивается Auto Layout. Сама же группа центрируется при помощи Constraints.

Constraints для фонового прямоугольника: Left+Right, Top+Bottom

Состояния масштабируемой кнопки: Дублируем экземпляр компонента масштабируемой кнопки, настраиваем внешний вид. Запаковываем его в новый компонент с настройками Constraints : Left+Right, Top+Bottom.

Auto Layout в данном случае уже не используется.

Кнопки могут состоять не только из прямоугольника и текста. Очень интересно смотрятся разного рода кнопки, построенные шейпах с различными настройками Constraints или Auto Layout:

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

В итоге для своей системы я продумала несколько вариаций кнопок и их состояний. За счет наследования мы можем легко управлять всеми кнопками сразу:

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

Век живи — век учись! Ввожу некоторые корректировки в нашу систему по прошествии какого то времени.

Если задать грамотные имена нашим кнопкам и иконкам с использованием знака «/», то они сгруппируются на панели компонентов и при выборе instance:

названия кнопок через «/»названия иконок через «/»

Кстати, чтобы быстро переименовать группу слоев, выделите их и нажмите правую кнопку мыши. в появившемся меню выберите Rename:

Далее в появившемся окне в поле «Rename to» впишите правила переименовывания. Например, выражение «icon/$&» добавит к текущим именам иконок префикс «icon/».

Кнопки под полем «Rename to» подскажут, как построить нужное вам выражение:

После того: как вы переименуете кнопки и в левой панели перейдете со вкладки Laere на вкладку Assets, вы увидите, что все кнопки сгруппировались в одну вкладку Button:

при этом если вам надо заменить одну кнопку на другую, то при изменении Instance компоненты кнопок также сгруппируются:

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

Добавление всплывающих кнопок на изображение товара на странице категорий в virtuemart 2

Сегодня будет не совсем обычный пост про virtuemart. Данное решение применимо на любом сайте, где нужно добавить всплывающие элементы при наведении на какой-либо блок.

Уже несколько раз поступали вопросы как на странице категорий при наведении мыши на изображение товара добавить какую-то кнопку или картинку. Это может быть кнопка Купить или Подробнее, или кнопка увеличения изображения.

Чтобы сразу было понятно о чем идет речь можно посмотреть ДЕМО.

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

Все реализовано без применения скриптов. Посмотреть исходный код html и css.

Единственное, чтобы убрать css трансформации до завершения загрузки страницы для тега body был добавлен дополнительный класс

.preload и в код страницы вставлен скрипт

$(«window»).load(function() {

$(«body»).removeClass(«preload»);

});

Источник решения — http://ruseller.com/lessons.php?id=1436

Не факт что эта проблема с трансформациями объектов до загрузки страницы себя проявит на вашем шаблоне.

Чтобы реализовать то же самое на странице категорий virtuemart в файле /components/com_virtuemart/views/category/tmpl/default.php перед кодом выводящим изображение

<a title=»<?php echo $product->product_name ?>» rel=»vm-additional-images» href=»<?php echo $product->link; ?>»>

<?php

echo $product->images[0]->displayMediaThumb(‘class=»browseProductImage»‘, false);

</a>

вставляем

<div>

<a href=»#»>Подробнее</a>

</div>

Чтобы правильно отцентрировать положение кнопки необходимо заранее знать размеры блока с изображением и он должен быть одинаков для всех товаров.

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

.browse-view .row .product .spacer img{

max-height:150px;

}

в моем примере размеры блока с изображением составили 150*200px и я добавил такие стили в файл /components/com_virtuemart/assets/css/vmsite-ltr.css

.overlay{

position:absolute;

width: 200px;

height: 150px;

transition: background 1000ms;

}

.knopki{

position:absolute;

text-align: center;

top: 50%;

left: 50%;

width: 116px;

margin: -15px 0 0 -58px;

opacity: 0;

transition: opacity 1000ms;

}

.overlay:hover .knopki{

opacity: 1;

}

.overlay:hover{

background: rgba(0, 0, 0, 0.3)

}

.knopki a{

display:block;

color:#333;

background:#f5f5f5;

border:1px solid #ccc;

border-radius:3px;

padding:3px 7px;

margin-bottom: 5px;

width: 100px;

}

.knopki a:hover{

background:#dadada;

}

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

В итоге при наведении на картинку получилось следующее

Надеюсь, что эта небольшая статья будет вам полезна 🙂

Альтернативный текст. HTML, XHTML и CSS на 100%

Настройка виджета Spotlight от Widgetkit

Виджет Spotlight добавляет различные эффекты к картинкам. Так, при наведении курсора на изображение, будет появляться заголовок с такой анимацией, как выдвижение надписи с различных сторон или появление прозрачности на картинке. Посетители сайта будут приятно удивлены такому эффекту.

Чем хорош виджет?

Работает на последней версии jQuery.
Виджет имеет 5 эффектов отображаемых на картинках.
При наведении на изображение появляется анимированный эффект.
Хороший дизайн виджета понравится пользователям.

Как создать новый виджет?

Зайдите в компонент Widgetkit и нажмите на вкладку Spotlight. При клике на надпись How to use вы увидите, как можно настроить разные эффекты виджета. Рассмотрим эти настройки подробнее.

Обратите внимание на надпись написанную в графе Selector. Это селектор jQuery, с помощью которого будут выбраны нужные элементы на странице.

Перед тем, как настраивать Spotlight, зайдите в раздел плагинов и отключите редактор кода, чтобы id созданного виджета отображался именно так, как вы его вставили. Теперь можно переходить непосредственно к его настройкам

Разберем один из примеров более подробно.

Эффект, о котором далее пойдет речь — bottom. При нем текст на картинке будет появляться снизу. Для того, чтобы отобразить его на сайте, вставьте такой код:

<a data-spotlight="effect:bottom;" href="/images/picture.jpg">
<img alt="picture" src="/images/picture.jpg" />
<div>Ваш текст</div>
</a>

Атрибуты в теге а:

data-spotlight — сюда записывается эффект, который вы хотите отобразить на картинке. В данном случае эффект называется bottom.
href — введите или скопируйте ссылку, на которую следует переходить при клике.
alt — название изображения. Если по какой-то причине изображение не загрузится, то при открытии страницы будет показан альтернативный текст (который введен в данный атрибут). Это помогает пользователю лучше ориентироваться на сайте.
src — в данном атрибуте должен быть прописан путь до картинки.
height, width — укажите высоту и ширину картинки.

Тег div предназначен для введения текста, который будет показан на миниатюре. В нем расположен атрибут class, с определенным значение («overlay») — это выпадающий блок, который появляется при наведении курсора на изображение.

В коде тег div должен обязательно стоять внутри тега a, иначе эффект не будет работать.

Коды остальных эффектов выглядят аналогично, только в атрибуте data-spotlight поменяется название эффекта:

Top — текст на изображении появится сверху.
Left и Right — надпись окажется слева и справа соответственно.
Fade — при наведении курсора картинка будет становится более прозрачной.

On — используется, если вы не хотите устанавливать на миниатюру никакого эффекта. Также, не нужно указывать атрибут div. Тогда при наведении курсора на картинку, на ней появится лупа.

Два виджета в одном

Виджет Spotlight часто используют совместно с Lightbox, что даёт двойной эффект. Так, при наведении курсора на миниатюру появляется один эффект, а при нажатии на нее, уже другой.

Рассмотрим на примере эффекта bottom.

<a data-spotlight="effect:bottom;" data-lightbox="on" href="/images/picture.jpg">
<img alt="picture" src="/images/picture.jpg" />
<div>Два виджета</div>
</a>

Еще один код для вставки:

<a data-spotlight="on" data-lightbox="on" href="/mypage.html">
    <img src="/picture.jpg" alt="" />
</a>

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

Если вы хорошо разбираетесь в Photoshop, вы можете напрямую отображать текст над изображением, настроив изображение подобным образом.

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

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

В этом кратком руководстве я покажу, как можно отображать текст над изображением, когда пользователь наводит курсор на изображение, используя только HTML и CSS, без jQuery и JavaScript.

Содержание

HTML
CSS
Демо
Заключение

1. HTML

Во-первых, начнем с разработки макета HTML.

Создание 3 родительских элементов

, которые содержат элементы и

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

Завершенный код

 

 
  Текст изображения 1 




 
  Текст изображения 2 




 
  Текст на изображении 3

2.CSS

Чтобы разместить текст поверх

, вам необходимо назначить position: relative для родительского

и назначить position: absolute для дочернего элемента

Теперь контейнер выровнен для размещения дочернего элемента

, чтобы нижний правый угол назначил bottom: 0 и right: 0 . Установите видимость : скрытая и непрозрачность : 0 , чтобы изображение не отображалось в первый раз. Использование свойства transition для добавления анимации.

При наведении курсора на родительский

измените видимость дочернего элемента : видимая и непрозрачность : 0,7; .

Завершенный код

 / * Родительский контейнер * /
.content_img {
 положение: относительное;
 ширина: 200 пикселей;
 высота: 200 пикселей;
 плыть налево;
 маржа справа: 10 пикселей;
}

/ * Контейнер дочернего текста * /
.content_img div {
 позиция: абсолютная;
 внизу: 0;
 справа: 0;
 фон: черный;
 белый цвет;
 нижнее поле: 5 пикселей;
 семейство шрифтов: без засечек;
 непрозрачность: 0;
 видимость: скрыта;
 -webkit-transition: видимость 0 с, непрозрачность 0.5с линейный;
 переход: видимость 0 с, непрозрачность 0,5 с линейная;
}

/ * Наведите указатель мыши на родительский контейнер * /
.content_img: hover {
 курсор: указатель;
}

.content_img: hover div {
 ширина: 150 пикселей;
 отступ: 8px 15px;
 видимость: видимая;
 непрозрачность: 0,7;
}

Вы можете изменить положение текстового контейнера, используя свойства CSS в верхнем левом нижнем правом углу.

Внизу слева — внизу: 0 и слева: 0
Справа вверху — вверху: 0 и справа: 0
Слева вверху — вверху: 0 и слева: 0
По центру — вверху: 40% и внизу: 40%.Здесь вы можете настроить процент в соответствии с вашими требованиями.

3. Демо

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

4. Заключение

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

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

Создание наложения анимированного текста на изображение при наведении.

Мы получаем множество запросов на обучающие материалы по наложению эскизов.

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

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

В процессе работы вы можете ссылаться на мой дизайн наложения изображений.

Как отображать текст при наведении курсора (с использованием взаимодействий с Webflow)

Шаг 1. Давайте создадим наш блок эскизов

Для начала я перетащу блок div в макет с 3 столбцами.Я присвою этому блоку div класс (называемый «блок миниатюр») и добавлю следующие стили:

Имя класса: блок миниатюр

Ширина: 100%

Высота: 300 пикселей

Положение: абсолютное

Фон Изображение (установите значение «Обложка» и «Центр»)

Важно установить положение «Абсолютное», и мы увидим, почему на следующем шаге.

Добавьте блок div, содержащий эскиз.

Шаг 2. Добавьте текст

Теперь мы добавим текст, который будет отображаться при наведении курсора.Сначала мы перетащим блок Div, затем поместим заголовок 3 и абзац внутри div.

Затем добавьте еще один div, содержащий заголовок и основной текст.

Затем мы добавим класс в наш блок Div (назвав его «Text Wrapper»), чтобы мы могли выполнить нашу CSS-анимацию, и добавим следующие стили:

Имя класса: Text Wrapper

Padding: 20px со всех сторон

Позиция: Абсолютная — Покрытие

Цвет фона: rgba (0,0,0,0.8)

Цвет текста: Белый

Затем задайте стиль текста и прозрачность фона.

Абсолютное позиционирование работает с этим блоком, потому что блок миниатюр, внутри которого он находится, имеет относительное положение. Это делает Text Wrapper абсолютно позиционированным на , относительно блока эскизов.

Шаг 3: Добавьте взаимодействие в наш Text Wrapper

Вы можете выполнить следующий шаг одним из двух способов — вы можете использовать простой CSS прямо внутри панели стилей или использовать взаимодействия Webflow. В этом примере я буду использовать взаимодействия Webflow.

Нам нужно добавить взаимодействие в наш Text Wrapper. Мы сделаем это, выбрав элемент, затем перейдя на панель «Взаимодействия» и создав новое взаимодействие.

Мы дадим ему имя, а затем добавим первоначальный внешний вид (внешний вид объекта до срабатывания триггера). В этом случае мы хотим, чтобы текст изначально имел непрозрачность 0%, чтобы он был невидимым.

Добавьте взаимодействие и установите начальное оформление.

Шаг 4. Добавление триггера наведения

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

В разделе Hover Over мы установим для элемента непрозрачность от 0% (его первоначальный вид) до 100% в течение 500 миллисекунд.

Когда мы наводим курсор на элемент, мы хотим, чтобы он вернулся к своему первоначальному виду с непрозрачностью 0%.

Добавьте триггер наведения.

Шаг 5. Предварительный просмотр

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

Предварительный просмотр вашего взаимодействия.

Играйте со своими вариантами!

Конечно, это лишь один из способов наложения текста. Вы можете создавать множество различных эффектов, просто настраивая параметры начального внешнего вида и наведения.

Например, в приведенном ниже взаимодействии я изменил первоначальный внешний вид Text Wrapper, чтобы масштабировать его до 110% (1.1), а затем масштабировал его до исходного размера при наведении, а затем обратно до 110% (наведите вне). Это действительно добавляет эффекту «поп-музыки».

Масштабирование копии вверх и вниз при наведении и наведении добавляет некоторого эффекта.

Поделитесь своей работой

Попробуйте сами, а затем поделитесь своей работой с нами на Facebook и Twitter!

Как отображать текст, когда пользователь наводит указатель мыши на элемент HTML — Techstacker

В этом сверхскоростном руководстве вы узнаете, как отображать текст краткого описания (например, всплывающую подсказку), когда пользователи наводят курсор на элемент, например изображение или ссылку.

Добавление всплывающей подсказки занимает несколько секунд. Просто используйте атрибут заголовка HTML: заголовок .

Отображение текста при наведении указателя мыши на элемент

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

Вот разметка HTML для элемента изображения выше: