jquery - この例で画像を明るくする最も簡単な方法

Question

ここで本当に簡単な質問です。いくつかの静的な画像があり、それらをより面白くしたいと考えています。1つのことはlighten、ある種のオーバーレイを使用することです。たとえば、次の画像の 1 つにマウスを合わせます: http://www.cnn.com/interactive/2013/02/world/pope-contenders/index.html (ライトニング効果のみ)。できればjqueryでこれを達成するための最も簡単な戦略は何ですか?

thx事前に

Answer 1

cssだけでできる

.myDiv:hover {
    background-image:url(/path/to/transparent.png); /* width 1px, height 1px, the color and opacity you want*/
    background-repeat:repeat;
}

不透明度の問題は、ie7 (おそらく ie8) では機能しないことです。

Answer 2

you have to put two divs inside each other.

alternatively you can also put a picture <img/> inside the container.

<div class="img-container">
   <div class="img-overlay"></div>
</div>

here's the css you need: (i assumed all your images have the same heights and widths as in the link you posted. alternatively you can set relative (in %) css properties.)

.img-container {
  position: relative;
  width: 100px; /* your images widths */
  height: 200px; /* your images heights */
  background: url('path/to/your/image.png');
}

.img-overlay {
  position: absolute;
  z-index: 5; /* it has just to be one more than the one above */
  width: 100px; /* your images widths */
  height: 200px; /* your images heights */
  display: none;
  background-color: '#333333'; /* your color of choice */
  opacity: 0.8;
}

do it with jQuery:

$('.img-container').mouseEnter(function() {
    $(this).children('.img-overlay').fadeIn('fast');
}).mouseLeave(function() {
    $(this).children('.img-overlay').fadeOut('fast');    
});

keep in mind that you should use vendor prefixes and filter for IE to make this work in older browsers. ensure also to deactivate it for very old IE and Safari versions.

Answer 3

この種の効果は、css 自体で簡単に実現できます。このCSSを試してみてください。

img
{
opacity:1.0;
}
img:hover
{
opacity:0.4;
}

IE8 以降の場合、フィルターを使用します。alpha(opacity=x);