Создание сайтов > Верстка > Эффект прозразрочности посредством CSS

Эффект прозразрочности посредством CSS

Эффект прозразрочности посредством CSS

В данном посте, я опишу давольно красивый и простый пример, который делает картинку (в нашем случае кнопки) прозрачной, а при наведении — изменяется на исходный цвет.

1. Добавляем в style.css следующее: (в конец)
/* ----////// Эффект прозрачности /////------- */

#banners a img {
opacity:0.3; -moz-opacity:0.3; filter:alpha(opacity=40);
}

#banners a:hover img {
opacity:1.0; -moz-opacity:1.0; filter:alpha(opacity=100);
}
2. Заключаем счётчики или любое изображение в дивы:
<div id="banners">Тут ваши счётчики</div>
3. Готово!

22 ноября 2008 в 18:416 комментариев Верстка,

Комментарии — 6 комментариев

  1. #127 WebMast в 21:20, 22 ноября 2008: (подписался)

    Ответить | Цитировать

    IE не поддерживает opacity. Опять же ишак всех наипал, извините за выражение.

  2. #128 Андрей в 22:23, 22 ноября 2008:

    Ответить | Цитировать

    >WebMast
    Там для IE отдельно же написано filter:alpha(opacity=40);

  3. #145 zlo в 8:44, 2 декабря 2008:

    Ответить | Цитировать

    Не действует это !

  4. #200 serg в 9:43, 9 января 2009:

    Ответить | Цитировать

    Вообще классно всё работает! ДО этого где то делал там ничего не работало. Теперь можно убрат эти счётчки вообще!В опере правда не доконца всё исчезает в IE всё работает!
    Спасибо! Вообще мужик блин!

  5. #205 WebMast в 11:14, 9 января 2009: (подписался)

    Ответить | Цитировать

    serg, если все дело в скрытии, то спрятать мождо и по другому 😉

  6. #232 =Ёж= в 23:04, 22 января 2009:

    Ответить | Цитировать

    Ооо эт я и искал спасиб большущее 🙂

Добавить комментарий

имя:

e-mail:

сайт:

текст:

Subscribe without commenting