Наведите указатель мыши на изображение a

Question

Я делаю сайт в Joomla.

И на моей первой странице у меня есть изображения, которые являются ссылками.

Я хочу, чтобы эти изображения получили слегка зелёный эффект, например, непрозрачность + зеленый цвет, а также оригинальные изображения ниже.

Можно ли использовать только css?

Я могу получить непрозрачность для работы, но не зеленый цвет.

Надеюсь, что кто-то может мне помочь.

Here is my site. it is the the small images under "Referencer" and "Nyheder"

Answer 1

Вы не будете в состоянии сделать то, что вы хотите с чистым CSS легко. В CSS нет «наложения». Вы можете манипулировать цветом фона/непрозрачностью, но изображение всегда будет поверх этого, чтобы оно не достигало желаемого эффекта.

Что вам нужно сделать, так это сделать изображение фона A, а затем сменить фон на аналогичное изображение с уже примененным эффектом. Изображения невелики, поэтому вы можете легко сделать им спрайты с над внешним видом на одном и том же изображении. Я сделал именно это на социальных значках в верхней части сайта моей компании - http://www.bnrbranding.com/

Answer 2

Это выполнимо с помощью CSS. Основной трюк заключается в том, что ссылки в настоящее время не окружают блок img, потому что их тип отображения является встроенным.

Предполагая, что следующий HTML:

<a href="#" class="greenish"><img src="..." /></a> 

Это CSS вам нужно:

a.greenish { 
    background: green; 
    display: inline-block; 
} 
a.greenish img { 
    opacity: 0.5; 
} 

Adjust зеленый и непрозрачности по вкусу, очевидно.

См. Это lovely jsfiddle для примера. Обратите внимание, что это включает в себя добавочный CSS, если вы хотите, чтобы он зависал только зеленым цветом.