Как затемнить изображение при наведении курсора мыши?

Моя проблема..

У меня есть несколько изображений (внутри гиперссылок), и я хочу, чтобы каждый затемнялся при наведении курсора мыши (т.е. применял черную маску с высокой непрозрачностью или что-то еще), а затем возвращался к нормальному курсу мыши. Но я не могу понять, как это сделать.

Я пробовал..

  • Анимированные цвета JQuery и некоторые ссылки на javascript.
  • Установка непрозрачности изображения с помощью javascript.

Я не хочу..

  • Начало изображения с непрозрачностью 80%, затем перейдите на 100% при наведении курсора мыши (это легко).
  • Чтобы поменять местами между двумя изображениями (один свет и один темный), забыли упоминать это извините.

Повторить.

Я хочу, чтобы изображение (inslide a hyperlink) затемнялось при наведении курсора мыши, а затем теряло свою темноту на мыши.

Мысли?

ОБНОВЛЕНИЕ:

Это мой прогресс от предложений. Выглядит хорошо в IE8, но не в FF3

<html>
    <body>
        <a href="#" onclick="location.href='http://www.google.com'; return false;" style="background-color:black; opacity:1;filter:alpha(opacity=100)">
            <img src="http://www.google.co.uk/intl/en_uk/images/logo.gif" width="200" 
            style="opacity:1;filter:alpha(opacity=100)" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" 
            onmouseover="this.style.opacity=0.6;this.filters.alpha.opacity=60" />
        </a>
    </body>
</html>

Мысли?

- Ли

ANSWER

Я собираюсь с этим (кажется, работает в IE8 и FF)

<html>
    <head>
        <style type="text/css">

        .outerLink 
        {
            background-color:black; 
            display:block; 
            opacity:1;
            filter:alpha(opacity=100);
            width:200px;
        }

        img.darkableImage 
        {
            opacity:1;
            filter:alpha(opacity=100);
        }
</style>
    </head>

    <body>
        <a href="#" onclick="location.href='http://www.google.com'; return false;" class="outerLink">
            <img src="http://www.google.co.uk/intl/en_uk/images/logo.gif" width="200" 
            class="darkableImage" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" 
            onmouseover="this.style.opacity=0.6;this.filters.alpha.opacity=60" />
        </a>
    </body>
</html>

Ответы

Ответ 1

Или, подобно идее erikkallen, сделайте фон тега A черным и сделайте изображение полупрозрачным при наведении курсора мыши. Таким образом вам не придется создавать дополнительные div.

Источник для решения на основе CSS:

a.darken {
    display: inline-block;
    background: black;
    padding: 0;
}

a.darken img {
    display: block;

    -webkit-transition: all 0.5s linear;
       -moz-transition: all 0.5s linear;
        -ms-transition: all 0.5s linear;
         -o-transition: all 0.5s linear;
            transition: all 0.5s linear;
}

a.darken:hover img {
    opacity: 0.7;

}

И изображение:

<a href="http://google.com" class="darken">
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200">
</a>

Ответ 2

Сделайте изображение на 100% ярким, чтобы было ясно. И затем на Img hover уменьшите его до любой яркости, которую вы хотите.

img {
   -webkit-transition: all 1s ease;
   -moz-transition: all 1s ease;
   -o-transition: all 1s ease;
   -ms-transition: all 1s ease;
   transition: all 1s ease;
}

img:hover {
   -webkit-filter: brightness(70%);
   filter: brightness(70%);
}
<img src="http://dummyimage.com/300x150/ebebeb/000.jpg">

Ответ 3

Я понимаю, что это немного поздно, но вы можете добавить в свой код следующее. Это не будет работать для прозрачных png, но для этого вам понадобится маска обрезки. Что я сейчас собираюсь увидеть.

outerLink {
    overflow: hidden;
    position: relative;
}

outerLink:hover:after {
    background: #000;
    content: "";
    display: block;
    height: 100%;
    left: 0;
    opacity: 0.5;
    position: absolute;
    top: 0;
    width: 100%;
}

Ответ 4

Поместите черный, полупрозрачный, div поверх него.

Ответ 5

Как насчет этого...

<style type="text/css">
    div.frame { background-color: #000; }
    img.pic:hover {
      opacity: .6;
      filter:alpha(opacity=60);
    }
</style>

<div class="frame">
    <img class="pic" src="path/to/image" />
</div>

Ответ 6

Создайте черный png, давайте скажем 50% прозрачности. Наложите это на mouseover.