Авторизация

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

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

Вам наверное часто приходилось видеть на посещаемых сайтах эффект проявления картинки из прозрачной в реальную при наведении курсора. Часто этот эффект используется при размещении счётчиков посещаемости сайтов внизу страниц. Смотреть пример на моём сайте 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="https://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)

Оставить комментарий
Навигация по сайту
  • Скачать 1
  • Скачать 2
  • Скачать 3
Универсальный шаблон готового сайта UseSite

Универсальный шаблон готового сайта UseSite


Полностью готовый к применению в качестве сайта шаблон UseSite является универсальным инструментом для быстрого создания Интернет проекта. В нем предусмотрены все основные модули необходимые современному сайту: фотогалерея,...

Подробнее →  

  • Просмотров: 26 381
Готовый сайт оплаты и доставки электронного товара. OnPay Система платежей

Готовый сайт оплаты и доставки электронного товара. OnPay Система платежей


Готовый шаблон сайта для продажи и доставки электронных товаров. Автоматическая оплата товара и мгновенная его отправка покупателю. Шаблон настроен для работы с платежной системой OnPay. Персональный аттестат WebMoney не...

Подробнее →  

  • Просмотров: 8 086
Редактируем шаблоны готового сайта. Скачать книгу для начинающих вебмастеров

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


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

Подробнее →  

  • Просмотров: 14 041

 

 

Нименование Количество Цена / 1 шт.
Всего: 0 руб.