Для начала рассмотрим эффект затемнения картинки с помощью CSS на примере логотипа сайта, созданного Joomla и имеющего шаблон protostar.

Что бы вместо названия сайта, у вас был логотип, в виде изображения, необходимо в менеджере шаблонов, во вкладе "Дополнительные параметры" в поле "Логотип" выбрать картинку, которую вы будите использовать в качестве логотипа вашего сайта, и нажать "Сохранить".

менеджер шаблонов

Картинка, появится в левом верхнем углу вашего сайта, останется, в файле CSS шаблона, расположенному по адресу ваш_сайт/templates/protostar/css/template.css у класса brand добавить выравнивание, так, что бы логотип выглядел красиво. Например так:

.brand {
    margin-left: 12px;
    margin-top: 14px;
    padding: 15px;

Должно получится так:

пример отображения логотипа

Теперь, что бы при наведении курсора, картинка становилась прозрачной, необходимо в том же файле найти код:

.brand:hover {
    color: #08c;
    text-decoration: none;

И добавить строчку opacity: 0.5;, так что бы получилось следующее:

.brand:hover {
    color: #08c;
    text-decoration: none;
        opacity: 0.5;
}

Все, теперь при наведении картинки, она будет становиться прозрачной. 

Если вам нужно, что бы другая картинка вашего сайта становилась прозрачной при наведении, в файл CSS добавьте следущий код:

/* затемнение картинки -----------------------------*/
#opa1 a img {
opacity:0.3; -moz-opacity:0.3;
filter:alpha(opacity=40);
}
#opa1 a:hover img {
opacity:1.0; -moz-opacity:1.0;
filter:alpha(opacity=100);
}
/* затемнение картинки ---------------------------*/

После чего, при исполнении кода:

<div id="opa1"> код картинки или баннера </div>

Картинки вашего сайта будут затемняться. Также можно задавать разные значения атрибуту opacity, который определяет уровень прозрачности элемента веб-страницы (значение «0» — полная прозрачность, а «1» наоборот полная непрозрачность. Удачи!

Если вам понравился материал, поделитесь им в социальных сетях. Спасибо!