Вернуться в каталог >>>
KPB logo
  Замена картинки на информационный блок. Атрибуты данных и псевдоэлементы
Скопируйте и вставте
Внутри тега <HEAD> - </HEAD>
Все стили примеров собраны в одной CSS таблице файл atributy-psewdo_qlementy.css. Если Вы хотите что-то изменить, Вам нужно, воспользовавшись функцией [Скачать с сервера], скачать данный файл и внести необходимые изменения.

Пример 1

Заголовок и сообщение рядом с изображением

Illustration of Smug Eagle
Illustration of Cafe Racer

Пример 2
Заголовок и сообщение проявляется при наведении курсора над изображением (animate opacity)

Illustration of Vulture

Пример 3
При наведении курсора заголовак наезжает на картинку сверху а сообщение снизу (animate tranforms)

Illustration of Viking

Пример 4
При наведении курсора картинка уезжает вправо а на её место слева приезжает заголовок и сообщение (animate tranforms)

Содержимое титульной части информационного блока находится в атрибуте data-title, а содержимое информационной части в атрибуте data-description
И Вы будите использовать скрипт прямо из моей библиотеки не загружая его к себе на страницу.
Вы экономите место и время.

Если Вы хотите иметь скрипт, чтобы изменять и другие его параметры, воспользуйтесь функцией [Скачать с сервера].
Если Вы не видите этой функции в []- следовательно Вы не зарегистрированы на сайте.Вам надо зарегистрироваться и войти как Пользователь.