Как затемнить изображение при наведении курсора? - PullRequest
Новая
       21

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

30 голосов
/ 17 ноября 2009

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

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

Я пытался ..

  • Jquery color animate и некоторые ссылки на javascript.
  • Установка непрозрачности изображения с помощью JavaScript.

Я не хочу ..

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

Для повторения ..

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

Мысли

ОБНОВЛЕНИЕ:

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

<html>
    <body>
        <a href="http://www.google.com" 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>

Мысли

- Ли

ОТВЕТ

Я собираюсь с этим (кажется, работает в 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="http://www.google.com" 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>

Ответы [ 6 ]

64 голосов
/ 17 ноября 2009

Или, аналогично идее Эриккалена, сделайте фон тега 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>
9 голосов
/ 14 апреля 2015

Сделайте изображение на 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">

Это сделает это, Надеюсь, это поможет

5 голосов
/ 13 декабря 2010

Я понимаю, что это немного поздно, но вы можете добавить следующее в ваш код. Это не будет работать для прозрачных 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%;
}
3 голосов
/ 17 ноября 2009

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

<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>
3 голосов
/ 17 ноября 2009

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

1 голос
/ 17 ноября 2009

Создание черного PNG с прозрачностью, скажем, 50%. Наложите это при наведении курсора.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...