Всплывающая информация при наведении курсора на изображение на CSS и jQuery

samurai.jpg

Не так давно на одном форуме я наткнулся на тему, где спрашивалось о том, как сделать так чтобы при наведении курсором на картинку (например, фото в портфолио, ага) появлялась эдакая черная полоска с информацией об этой самой картинке (например, данные о авторе, дате съемки и описании). Так вот, просивший даже не знал, по каким ключам искать такое в Гугле, равно как этого не знает большинство. Другой вопрос, что я знаю, как сделать это и без Гугла, поэтому я накрапал небольшую статью-урок.

Способов решения задачи «наведение курсором на картинку = hover» есть 2. Первый из них подразумевает использование исключительно CSS, и соответственно, выглядит немного топорно. Второй сделан на jQuery и переход более плавный. Выбирайте, который вам больше по душе, а мы начнем.

Ах, да. нам понадобится следующий HTML (есть общий div#wrapper и ссылка-изображение — a.background-image, обернутая в div.background):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>test page</title>
<link rel="stylesheet" href="styles.css" type="text/css" media="screen" />
</head>
<body>
<div id="wrapper">
<div class="background">
<a class="background-image" href="#">Image</a>
</div>
</div>
</body>
</html>

CSS в начале имеется следующий:

div#wrapper
{width: 600px;
margin: 0 auto;
}
a.background-image
{display: block;
background: url(images/samurai.jpg) no-repeat top left;
width: 500px;
height: 500px;
text-indent: -9999px;
}

div#wrapper имеет ширину 600px и находится по центру страницы; a.background-image отображается как блочный элемент, ширина и длина которого по 500px, а фон (background) — собственно изображение. Текст ссылки убран с помощью text-indent: ?9999px;

Подготовка

Прежде всего нам необходимо создать div с этой самой информацией, которую мы хотим отображать при наведении на картинку.

Добавляем div.info с h3-заголовком и двумя параграфами текста в div.background после ссылки:

<div class="background">

<a class="background-image" href="#">Image</a>

<div class="info">
<h3> Information </h3>
<p class="date"> 11. 05. 2010 </p>
<p class="infoText"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean risus libero, dictum blandit tristique in, semper nec odio. Aliquam eget turpis vitae nibh tempor posuere eget et justo. Ut ultrices, sapien et facilisis vestibulum, lacus nunc dictum nunc, semper placerat libero ligula sed nisi. </p>
</div>
</div>

Поскольку новосозданный div.info будет находится внизу изображения, то значит он будет находится внизу и div.background. Применим для этого абсолютное позиционирование к div.info (перед этим не забываем указать размеры и задать position: relative для родительского элемента). CSS:

div.background
{width: 500px;
height: 500px;
position: relative;
}
div.info
{background: black;
opacity: 0.8;
width: 500px;
position: absolute;
bottom: 0px;
right:0px;
}

Также мы задаем div.info черный фон и прозрачность 80% (в IE7 свойство opacity не поддерживается, так что если вам нужна кроссбраузерность — используйте для фона png-изображение). Надеюсь, что указать отступы для заголовка и параграфов вы сможете и без моей помощи.

В конце у нас получилось вот что: картинка и div с информацией на ней. Но нам ведь нужно, чтобы этот div отображался только при наведении на изображение мышкой? Будьте спокойны, уже начинаем.

Способ 1: CSS

Для начала необходимо спрятать div.info, сделать это можно с помощью CSS-свойства display:none;

div.info
{display:none;
...
}

Теперь хитрый трюк: мы указываем поведение div.info, но в случае наведения курсором на div.background! Вот как это выглядит в CSS:

div.background:hover div.info
{display: block;}

Иными словами, в :hover состоянии div.background у нас будет отображаться div.info! Что и требовалось доказать.

Способ 2: более плавные переходы с jQuery

Но, предположим, что такое отображение информации вы находите слишком резким и хотите сделать ее вывод более плавным и красивым. Не вопрос, особенно когда есть jQuery.

Начинаем с того документа, который получили в конце подготовительного этапа.

Во-первых, присоединим jQuery к документу. Для чего в секцию <head> документа нужно вписать следующее:

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

Div с информацией будет выводиться следующим скриптом (надо сказать, что я попробовал несколько вариантов, и этот оказался наилучшим):

<script type="text/javascript">
$(document).ready(function() {
$('div.info').css("opacity", "0");
$('div.background').hover(function() {
$('div.info').stop().fadeTo("normal", .8);},
function() {
$('div.info').stop().fadeTo("normal", .0);
});
});
</script>

Пояснения:

$(document).ready(function() — когда DOM загрузится, сделать следующее;

$(‘div.info’).css(«opacity», «0») — добавляем к div.info свойство opacity со значением «0» (иными словами, делаем его невидимым);

$(‘div.background’).hover(function() {
$(‘div.info’).stop().fadeTo(«normal», .8);},
function() {
$(‘div.info’).stop().fadeTo(«normal», .0);});
— для hover-состояния в jQuery необходимо прописать 2 функции: первая будет выполняться вы будете наводить курсор на изображение, вторая — когда вы будете его убирать.

Функция fadeTo («скорость», значение) изменяет прозрачность объекта до указанного значения с указанной скоростью.

Итак, в нашем случае происходит во что: при наведении курсора на div.background, прозрачность div.info увеличивается до 80% (.8) с нормальной («normal») скоростью (первая функция после hover). Вторая функция исполняется при убирании курсора с div.background и прозрачность div.info уменьшается до значения 0 (то есть div.info опять становится невидимым).

Таким образом мы сделали то же самое, что и в первом примере, только с более плавной и приятной анимацией.

Скачать файлы стати

h++p://cssninja.ru/css-hover-and-jquery-hover/

11 комментариев

  1. В статье не хватает наглядного примера или ссылки на демо-страничку. А так очень даже познавательно и интересно.

  2. метод с jQuery не овсем работает если имеется несколько картинок — при наведении на одну текст всплывает на всех

  3. Спасибо Автор, я оч долго мучался над этим, немного над другим, но смысл css тот же, оч благодарен вам

  4. привет интересно вот такой момент сайт уже готов на главной около 7 фото как сделать для каждой фотки отдельный вывод текста при наведение курсора на фото. сайт nikolina.com.ua . буду благодарен за ответ.

  5. Geka, в WP последних версий есть такая фишка как галерея, и к фотографиям в галерее можно добавлять названия/описания…, соответственно можно сделать вывод этого текста через определенные функции…

    Или как вариант можно сделать отдельную категорию (закрыть ее от публикации в общей ленте), и в ней уже размещать и фото и текст (можно через произвольные поля)…

  6. artem,
    чтобы этот способ работал для одной картинки из нескольких (чтобы div.info всплывал только на той картинке, над которой курсор), можно строки

    $('div.info').stop().fadeTo("normal", .8);},

    и

    $('div.info').stop().fadeTo("normal", .0);

    переделать в

    $('div.info', this).stop().fadeTo("normal", .8);},

    и

    $('div.info', this).stop().fadeTo("normal", .0);

  7. Клевый урок, а может ли кто то подсказать как применить другой эффект появления, но не растворение не «fade» и где можно видеть эти эффекты-) оч хотел бы узнать

  8. Здравствуйте! Спасибо за статью использовал ваш способ. Может кто-нибудь сможет помочь. Делал данный эффект + динамическая подгрузка.
    Вот код:

    jQuery(document).ready(function($) {
    var count = 2;
    var total = max_num_pages; ?>;
    $(window).scroll(function(){
    if ($(window).scrollTop() == $(document).height() — $(window).height()){
    if (count > total){
    return false;
    }else{
    loadArticle(count);

    }
    count++;

    }

    $(document).ready(function() {
    $(‘.info’).css(«opacity», «0»);
    $(‘.prosra’).hover(function(){
    $(‘.info’, this).stop().fadeTo(«normal», .8);},
    function() {
    $(‘.info’, this).stop().fadeTo(«normal», .0);
    });
    });

    });
    Я делал чтобы при наведении появлялась другая полупрозрачная картинка. Возникла небольшая проблема. При подгрузке новых сразу появляется эта полупрозрачная картинка, а если сделать прокрутку ниже, то все нормально. Если меня кто-то понял, как это исправить?))

Оставить комментарий

Ваш электронный адрес не будет опубликован.


*


четыре × 1 =