Сайт своими руками


Пособие для начинающих
Редактируем готовые шаблоны


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


» » Эффект проявления картинки из прозрачной в реальную.

Эффект проявления картинки из прозрачной в реальную.

  • Автор: Saah
  • |
  • Комментариев: 0
  • |
  • Просмотров: 541
Эффект проявления картинки из прозрачной в реальную.

Вам наверное часто приходилось видеть на посещаемых сайтах эффект проявления картинки из прозрачной в реальную при наведении курсора. Часто этот эффект используется при размещении счётчиков посещаемости сайтов внизу страниц. Смотреть пример на моём сайте UseSite.ru. Реализуется данная опция довольно просто посредством CSS и HTML кода.

В готовый или вновь созданный файл style.css вставляем код:
a.show img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}

a.show:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0;}

В HTML документ (страницу сайта) вставляем:
<a class="show" href="http://sitey.ru/"><img src="1.png" /></a>

Где show - это класс в CSS, который должен совпадать с классом в HTML;
1.png - картинка, измените путь к ней на свой, в зависимости от её размещения;

В коде CSS можете менять параметры opacity на своё усмотрение. Можете эксперементировать с глубиной прозрачности.

Можно обойтись и без CSS файла. В этом случае пропишите вышеуказанный код для CSS файла между тегами <head></head> начала страницы, обернув его между тегами <style></style>

Для наглядности скачайте папку с готовыми файлами: index.html, style.css и картинкой 1.png. Не забывайте, что эффект буде действовать в рамках одной папки, иначе необходимо сменить прописку адресов размещения картинки и файла style.css.

Скачать пример эффекта проявления картинки из прозрачной в реальную:
show.rar [30,3 Kb] (cкачиваний: 23)


Людям интересно:


Статья опубликована: 17-11-2015, 19:16

Сохраните для себя


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




Имя:* E-Mail:*
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Вставка ссылкиВставка защищенной ссылки Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Введите код: *
Использование материалов сайта приветствуется. При копировании и размещении данной информации на сторонних ресурсах, ссылка на сайт SiteY.ru желаема.