При наведении на картинку появляется текст: 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-обозревателем во внимание.

1. Хм.. Если вы делаете только одно изображение на всю страницу, то выгодно будет пользоваться absolute, так как он позволит выбрать положение по всему экрану.
2. А если вам нужно будет сделать маленькую картинку в нутри тега <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>    <div>       <a href=»#»>Подробнее</a>    </div> </div>

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

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

.browse-view .row .product .spacer img{ max-height:150px; }

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

.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%

Читайте также

Текст

Текст Добавить текст к слайду просто – для этого достаточно выбрать пункт меню «Вставить – Текст» или нажать на иконку с заглавной буквой Т на панели инструментов. В появившейся рамке можно вводить слова и предложения, пользуясь стандартными инструментами

Popup («текст сообщения», «количество секунд», «текст заголовка», «тип окна»)

Popup («текст сообщения», «количество секунд», «текст заголовка», «тип окна») Метод отображает текстовое сообщение, указанное в первом входном параметре. При этом, кроме текста сообщения нужно указать следующие входные параметры.? Количество секунд — определяет

Текст

Текст В типографике существует множество шрифтов, однако в веб-дизайне для набора текстов веб-страниц используется ограниченное их количество.Как правило, это:? Georgia;? Times New Roman;? Arial;? Verdana;? Comic Sans MS.Шрифты подразделяются на шрифты с засечками (типа Georgia, Times New Roman), шрифты без

Альтернативный способ создания ядра

Альтернативный способ создания ядра Как уже отмечалось, семантическое ядро портала имеет одну важную особенность – оно большое. Очень большое. Некоторые туристические порталы используют для продвижения ядро, включающее порядка 100 000 запросов, а если они планируют

Текст

Текст Перейдите на вкладку Текст (рис. 12.3) и настройте следующие параметры.• Чтобы изменить цвет текста, выделите мышью текст в рабочем окне или в списке на вкладке Текст и из раскрывающегося списка Цвет выберите нужный.• Чтобы изменить расположение текста в рабочем

Текст

Текст В этой вкладке есть всякие полезные (или просто красивые) штуки, которые вы может вставить в текст.НадписьКогда мы рассматривали фигуры, то уже встречались с надписями. Это фигура, внутри которой есть текст.Щелкните на кнопке Надпись. В появившемся списке выберите

Альтернативный способ голосового общения в Интернете

Альтернативный способ голосового общения в Интернете Ведя речь о телефонных звонках с помощью Интернета, следует рассказать еще об одной малоизвестной, но очень полезной возможности такого общения. Предоставляет ее компания Betamax (www.betamax.com), а точнее фирмы, занимающиеся

Альтернативный способ трансляции

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

Однострочный текст

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

Текст

Текст Экранная клавиатураЭкранная клавиатура предназначена для ввода печатного текста с помощью маркера и является аналогом компьютерной клавиатуры. Вызов этого инструмента осуществляется щелчком по пиктограмме Текстовые инструменты на панели mimio Инструменты

SPB Shell 3D: альтернативный интерфейс для Google Android Алексей Талан, Mobi.ru

SPB Shell 3D: альтернативный интерфейс для Google Android Алексей Талан, Mobi.ru Опубликовано 15 апреля 2011 годаПитерская компания SPB Software известна в первую очередь как создатель популярнейшей оболочки для Windows Mobile — SPB Mobile Shell. Именно благодаря «шеллу» угрюмый WM-смартфон становился

QIP — альтернативный ICQ-клиент

QIP — альтернативный ICQ-клиент Возможно, для общения в ICQ вам больше понравится альтернативный ICQ-клиент — программа QIP. Существуют две версии этой программы: QIP 2005 и OIP Infium. На нетбуке предпочтение стоит отдать более простой и компактной версии — QIP 2005.В программе QIP 2005 есть

У6.6 Текст

У6.6 Текст Рассмотрите понятие текста, обрабатываемого текстовым редактором. Задайте это понятие в виде АТД. (Это задание оставляет достаточно много свободы спецификатору, не забудьте включить содержательное описание тех свойств текста, которые вы избрали для

6.1.1. Набираем текст

6.1.1. Набираем текст Для выполнения приведенного ниже задания нам понадобится материал разд. 5.1.3.Задание1. Запустить приложение Pages.2. Набрать текст, приведенный на рис. 6.1, исправив ошибки, допущенные при наборе.3. Файл задания находится на прилагаемом диске: /pages/tasks/6.1.1.pdf, а

8.11. АЛЬТЕРНАТИВНЫЙ ПРОЕКТ ГРАФИЧЕСКОГО ИНТЕРФЕЙСА

8.11. АЛЬТЕРНАТИВНЫЙ ПРОЕКТ ГРАФИЧЕСКОГО ИНТЕРФЕЙСА При развитии программ постоянно возникает проблема увеличения функциональных возможностей одного объекта за счет функциональных возможностей другого. Актуальнейшая проблема программирования — написание гибких

Настройка виджета 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.

---

Содержание

1. HTML
2. CSS
3. Демо
4. Заключение

---

1. HTML

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

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