Контентное поле на изображении при наведении?

Question

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

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

Я полагаю, что этот эффект можно было бы сделать с помощью небольшого количества JS или даже переходов CSS, чтобы придать эффект исчезновения.,

Мне просто нужно знать, как сделать так, чтобы над изображением при наведении курсора отображалось поле содержимого, возможно, с непрозрачностью 80%.

Вот пример того, что я имею в виду:

Спасибо за помощь, если кто-нибудь может указать мне правильное направление, это будет оценено.

Я могу опубликовать дополнительную информацию, если это необходимо.

Answer 1

Это несколько простой способ реализации hover-шоу и скрытия с помощью jquery.

Рабочий пример: http://jsfiddle.net/va2B8/2/

jQuery (http://jquery.com/):

$(document).ready(function() {

    $("#Invisible").hide()
    $("#hoverElement").hover(
      function () {
        $('#Invisible').stop().fadeTo("slow", 0.33);
      },
      function () {
        $('#Invisible').stop().fadeOut("slow");
      }
    );

});

html:

<p id="hoverElement">This little piggy will show the invisible div.</p>

<div id="Invisible">This is the content of invisible div.</div>

css:

#Invisible { background: #222; color: #fff; }

Редактировать: я изменил URL для рабочего примера, потому что я забыл исчезнуть при помощи мыши.

---

---

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

(Без остановок можно зависать несколько раз, а затем, когда он остановится, анимация будет продолжать работать до тех пор, пока не будет выполнена каждая анимация столько раз, сколько он ее запустил. Вы можете проверить это вздесь http://jsfiddle.net/va2B8/1/)

Answer 2

Вы можете начать использовать эту скрипку:

http://jsfiddle.net/Christophe/2RN6E/3/

1 div, содержащий изображение и диапазон, подобный:

<div class="image-hover">
    <img src="" />
    <span class="desc">text to be displayed when imae hover</span>
</div>

Обновление

Все можно сделать с помощью CSS ...

http://jsfiddle.net/Christophe/2RN6E/4/

Answer 3

Я только что сделал это:

http://twostepmedia.co.uk

Он использует плагин hoverintent jquery, поэтому задержка 250 мс после того, как пользователь наводит курсор мыши, чтобы избежать ошибочного поведения при наведении курсора.

Answer 4

Вот простой плагин jQuery, который вы можете реализовать: http://file.urin.take -uma.net / jquery.balloon.js-Demo.html

Работает так:

$(function() {
  $('img').balloon(options);
});

Этот jQuery применил функцию всплывающих подсказок ко всем изображениям на странице. Вот ваш HTML:

<img src="example.png" alt="Here's your caption." />

Текст в выноске будет таким, какой есть в атрибуте alt для изображений, и тем, что есть в атрибуте title для других тегов.