Всем приветы и ответы!
Шесть лет назад, когда я создал свой очередной сайт на просторах интернета, а стандартны CSS3 только внедрялись в массы, я задался очень важным вопросом:
Почему картинка установленная в ссылки на сайте, не взаимодействует со стрелкой мышки пользователя?
Вспомните любую ссылку которую вы видите на любом сайте, когда вы наводите на неё курсор мыши, то она меняется, а ссылка взаимодействует с действием пользователя при наведении или при нажатие на неё.
Ссылка может поменять цвет, размер шрифта, появиться подчеркивание, рамка и другие различные эффекты которые я называю визуальным шумом.
Так вот, почему с картинкой в ссылки не происходит каких либо действий, меняется только курсор?
Как задать прозрачность в CSS стилях?
Для того чтобы решить данную задачу, следует в CSS стили добавить следующую строчку кода:
body a:hover img {
opacity: 0.7;
}
Второй способ CSS прозрачность картинки!
Данное решение подойдёт для сайтов, которые хотят добавить счетчикам статистики прозрачность, дабы не выделять их на фоне всего дизайна.
Для того чтобы добиться нужного результата, следует поместить весь HTML код счётчика в ячейку div с нужным нам классом:
<div class="opacity">
<a href="#"><img alt="счетчик пример 1" src="img/1.gif" /></a>
<a href="#"><img alt="пример счетчик 2" src="img/2.gif" /></a>
<a href="#"><img alt="счетчик 88x31" src="img/3.gif" /></a>
</div>
а в завершении данного решения, прописать CSS стили:
.opacity a img {opacity:0.3;}
.opacity a:hover img {opacity:1.0;}
На этом у меня всё! Удачных решений!
А Вы оставите комментарий первым?