Показать информацию о изображении при опрокидывании

Question

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

В идеале, когда пользователь наводит курсор на изображение было бы «серым» (например, слой 50% непрозрачности черный) с некоторым HTML, как названия и т.д. и т.п.

Может кто-то мне точку в правильном направлении или обеспечить образец кода

Благодаря

Answer 1

вы могли бы сделать что-то вдоль этих линий:

Итоговое изображение и DIV для отображения, например:

<div class="imgHover"> 
    <div class="hover">Test Content for the hover</div> 
    <img src="myImage.jpg" alt="" /> 
</div> 

С помощью CSS, как это:

.imgHover .hover { 
    display: none; 
    position: absolute; 
    z-index: 2; 
} 

И, наконец, JQuery с помощью .hover() так:

$(".imgHover").hover(function() { 
    $(this).children("img").fadeTo(200, 0.25) 
      .end().children(".hover").show(); 
}, function() { 
    $(this).children("img").fadeTo(200, 1) 
      .end().children(".hover").hide(); 
}); 

You can try the above code out here

Это исчезает из изображения и отображает <div> над ним, когда вы наводите курсор, чтобы обернуть так, чтобы <div> был абсолютно расположен непосредственно над <img>, если вам нужно много содержимого для обертывания, дайте .hover div те же размеры, что и образ ... просто зависит от точного взгляда, в котором вы собираетесь.

Answer 2

Если вы используете JQuery в любом случае, вы можете плагин подсказок: http://www.webdesignbooth.com/15-jquery-plugins-to-create-an-user-friendly-tooltip/