it-swarm-ja.tech

マウスオーバーで画像を暗くするには?

私の問題..

多数の画像(ハイパーリンク内)があり、マウスオーバーでそれぞれを暗くして(つまり、不透明度の高い黒いマスクを適用するなど)、mouseoutで通常に戻します。しかし、私はそれを行うための最良の方法を理解することはできません。

試してみた..

  • JQueryカラーアニメーションといくつかのJavaScriptリファレンス。
  • JavaScriptを使用して画像の不透明度を設定します。

私はしたくない..

  • 画像は不透明度80%で始まり、マウスオーバーで100%になります(簡単です)。
  • 2つの画像(1つの明るい画像と1つの暗い画像)を交換するには、この申し訳ありません。

繰り返すために..

画像上で(ハイパーリンクをスライドさせて)マウスオーバーで暗くし、マウスアウトで暗さを失います。

考え?

更新:

これは提案からの私の進歩です。 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>

考え?

-リー

[〜#〜] 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="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>
30
Lee Englestone

または、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>
64
fresskoma

画像を100%明るくして、鮮明にします。そして、Imgホバーで、希望の明るさに下げます。

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">

それでうまくいきます

9
Sabba Keynejad

私はこれが少し遅れていることを理解していますが、次のコードを追加することができます。ただし、これは透明な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%;
}
5
Sam Collins

これはどう...

<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
Ei Maung

その上に黒の半透明のdivを配置します。

2
erikkallen

50%の透明度で黒いpngを作成します。これをマウスオーバーでオーバーレイします。

1
bitbonk