HoverFade эффект для миниатюры

[happybolt]

Здравствуйте

Существуют плагины фотогалереи, например: prettyPhoto, fancybox и прочие

Как использовать плагин я понял, но повсеместно встречаю эффект, когда при наведении курсора на миниатюру изображения оно затемняется или еще как-то расфокусируется и появляется изображение "плюса" (или другое) как предложение просмотреть изображение в большем масштабе или перейти по ссылке

И эта маленькая иконка "плюс" (или другая) интересно появляется визуально: HoverFade эффект или выезжает снизу-сверху-сбоку

Как разработчики делают это?

Не могу понять

Может есть публикации кода на эту тему? Я не нашел

Помогите, пожалуйста

PS Примеры:

http://themes.evgenyfireform.com/themask/demo/ (После заголовка - Our latest work)

http://igniteflash.com/themeforest/cosmopolitan/light/index.html (После заголовка - CLIENT PROJECTS)

http://themes.trendywebstar.com/CorporatePixels/light-orange/

[buddah]

Такой же эффект как в выпадающем меню. JS здесь можно использовать разве что для анимации и плавных переходов. Сам эффект делается с помощью элемента с низким opacity, который показывается абсолютно при наведении на родителя. То есть связка display: none/block.

[Seemann]

На этом примере.

http://igniteflash.com/themeforest/cosmopolitan/light/images/enlarge.png - картинка - бэкграунд для блока с изображением. Opacity: 0.6 для самой картинки при наведении на <img>.

Edited June 19, 2012 by Seemann

[happybolt]

buddah, Seemann

Спасибо за быстрые ответы

Очень вам признателен

buddah, если вас не очень затруднит, опубликуйте код плавного перехода

_________________________________________________________

Про абсолютное позиционирование я понял

Без анимации у меня получилось

Как делать с бэкграундом я понял тоже

Edited June 19, 2012 by happybolt

[Avalon4eg]

    $('#id_elementa').hover (function(){
         $('#id_popup_elementa').fadeIn('Скорость в миллисекундах') 
    })

[buddah]

buddah, если вас не очень затруднит, опубликуйте код плавного перехода

http://jsfiddle.net/uB4wn/

[happybolt]

Avalon4eg, buddah

Спасибо за ответы

_________________________________________________________

Я нашел тоже, но пока только Fade Effect

<script type="text/javascript">
  $(document).ready(function(){
    $("img").hover(function() {
      $(this).stop().animate({opacity: "0.8"}, 'slow');
    },
    function() {
      $(this).stop().animate({opacity: "1"}, 'slow');
    });
  });
</script>

Fade Effect здесь:

http://bavotasan.com/2009/creating-a-jquery-mouseover-fade-effect/

http://bavotasan.com/2010/jquery-simple-animated-fade-effect/

[happybolt]

Как оказалось код для Fade Effect встречается нередко, вот еще:

$(document).ready(function(){
    $(".thumbs img").fadeTo("slow", 0.6); // This sets the opacity of the thumbs to fade down to 60% when the page loads

    $(".thumbs img").hover(function(){
        $(this).fadeTo("slow", 1.0); // This should set the opacity to 100% on hover
    },function(){
        $(this).fadeTo("slow", 0.6); // This should set the opacity back to 60% on mouseout
    });
});

Это здесь:

http://www.catswhocode.com/blog/10-awesome-jquery-snippets

_________________________________________________________

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

Знает ли кто как сделать так?

[buddah]

Как оказалось код для Fade Effect встречается нередко, вот еще:

$(document).ready(function(){
    $(".thumbs img").fadeTo("slow", 0.6); // This sets the opacity of the thumbs to fade down to 60% when the page loads

    $(".thumbs img").hover(function(){
        $(this).fadeTo("slow", 1.0); // This should set the opacity to 100% on hover
    },function(){
        $(this).fadeTo("slow", 0.6); // This should set the opacity back to 60% on mouseout
    });
});

Вы по ссылке ходили? Я то же самое написал..

[happybolt]

Вы по ссылке ходили? Я то же самое написал..

Конечно же, уважаемый buddah, я прошел по ссылке, которую вы любезно предложили

Вы мне помогли, потому что вначале я вообще не представлял что нужно искать

Более того, ваш пример на странице http://jsfiddle.net/uB4wn/ я сохранил на своем компьютере в специальной папке "Fade Effect"

Я видел, что код такой же, но все же немного другой ...

Спасибо, учитель!

---

На этом сайте http://dribbble.com/ при выделении текста бэкграунд выделенного текста не стандартного синего, но розового цвета

Это сделано с помощью jQuery?

Как сделать так?

[Catherine]

Нет, не jQuery http://ipic.su/img/img5/fs/1340143187-clip-149kb.1340143377.jpg

Это сделано с помощью css, псевдоэлемент ::selection

[happybolt]

Catherine, спасибо!

Вы сделали этот скриншот http://ipic.su/img/img5/fs/1340143187-clip-149kb.1340143377.jpg специально для меня?

О, Catherine! Вы умница

Edited June 21, 2012 by happybolt