Javascript image hover effect

Question

我很想知道如何添加图像悬浮效果，使图像稍微变暗或变灰，并在要悬浮的图像上方出现2个按钮？

Answer 1

You don't need JavaScript. Assuming the following HTML:

<div id="element">
  <img src="path/to/image.png" />
  <div>
    <button>Btn1</button>
    <button>Btn2</button>
  </div>
</div>

CSS:

#element {
  position:relative;
}
#element>img {transition: all 0.5s ease}
#element:hover>img {
  opacity:0.5;
  -webkit-filter:grayscale(0.5);
}
#element>div {
  opacity:0; transition: all 0.5s ease;
  position:absolute; bottom:0;
}
#element:hover>div {
  opacity:1;
}

Answer 2

There are two ways to do the two things.

The first of the two is to dim the background image. Although you're not actually dimming it.

Create a div with the image as a background image. Inside of that div, create a second div, and place your buttons inside of it. The background image of this second div should be a background image that is a single pixel .PNG. The PNG should be a white pixel that has an opacity of 50 or 60%. If the background of your website is not white, then match this pixel to the same colour as your document background.

On document load, fade out the inner div that contains the buttons to 0, at 0 speed. Don't hide it or set to display:none otherwise you won't be able to trigger a hover event on it.

On the inner div, attach a hover event listener that causes it to fadeIn and fadeOut.

This will give the effect that the image is fading out, and the buttons will appear as you expect. The reason we use a semi-transparent background and not just fade the inner div to 0.6, is because we want the buttons to be 100% visible. If we only faded the inner div in, the buttons would also be at 0.6. Using a semi-transparent background displayed at 100% opacity gives the illusion that the content below is dimmed.

As far as greying out the image, you can do the exact same thing except create a duplicate image of the container background, and desaturate it in photoshop so it is black and white. Then use that as the background image of the inner div. When the inner div fades in, it will give the illusion that the background image is fading to grey.

Here's a working copy of the "fade to grey": http://jsfiddle.net/D6mYh/

Code for the fade to grey:

HTML:

<div id="outer">
   <div id="inner">
       <button id='test'>Test</button>
       <button id='cancel'>Cancel</button>
   </div>
</div>

CSS:

#outer {
    width: 400px;
    height: 300px;
    position: relative;
    border: 1px solid black;
    background:url('http://i.imgur.com/kRiuDiK.png');
}

#inner {
    width: 100%;
    height: 100%;
    background:url('http://i.imgur.com/jNLk69v.png');
}

#test {
    position: absolute;
    top: 100px;
    left: 100px;
}

#cancel {
    position: absolute;
    left: 200px;
    top: 100px;
}

and JS:

$(function() {

    $("#inner").fadeTo(0,0).hover(function() {$(this).fadeTo(100,1);}, function() {$(this).fadeTo(100,0);});


});