Помощь в реализации одной идеи

[dsasda]

Здравствуйте! Нужен пинок под зад, что бы знал, куда смотреть, что бы сделать след. идею:

Есть картинки, допустим 3 (в ряд).
Когда наводишь на эту картинку, то фон меняется, допустим на серый(но это не главное) или фотка становится размазанной(blur effect).
На этот фон вылезают, к примеру, 3 кнокпи:
Like (Facebook)
Like (vk)
Like(odnoklassniki)

- Это всё как пример.
Что я имел ввиду под "вылезает":
contest.uid.me (сайт - не реклама) - при наведении мышки на Номинации. Я где-то в интернете уже видел подобный "урок", но, увы, не запомнил, а теперь не знаю как и где искать. Это либо Jquery, либо чистый CSS, А может и оба, но надеюсь, что CSS, т.к. с jquery вообще не знаком и не дружу.

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

Буду очень благодарен, если будут и доп. идеи.

P.S. про пример (сайт), если я правильно понял, то нужно использовать transition (css) и позиционировать картинку.

Edited January 13, 2014 by dsasda

[ShumNo]

изменение фона через hover по нужному объекту.

"размазанной(blur effect)." - полагаю только на js

Появление кнопок при наведении можно по разному сделать, например, поместить их под фотку а при наведении (hover) вытаскивать наверх с помощью z-index

[dsasda]

Хм, А можно пример, как это в коде будет выглядеть "кнопки под фотку" и вытаскивать ? П.С. я до конца не понимаю, как эти z-index работают и КАК с ними работать, может заодно подскажите ресурс, где понятно расписано, как им пользоваться, желательно с разными вариантами.

[npofopr]

Наверно, что то наподобие этого http://ruseller.com/lessons.php?rub=2&id=1706

Вообще, если вы владеете css, то в чем проблема достать эффект с http://contest.uid.me ?

[Николя223]

"размазанной(blur effect)." - полагаю только на js

можно и на CSS сделать. Но не будет работать в старой опере и ослах ниже IE10 

[dsasda]

Наверно, что то наподобие этого http://ruseller.com/lessons.php?rub=2&id=1706

Вообще, если вы владеете css, то в чем проблема достать эффект с http://contest.uid.me ?

CSS владею не отлично, основы знаю - ими и делаю + ищу на этом сайте в справочнике. Нашёл тут советы и ошибки новичков, впреть буду исправлять свои ошибки. А за сайт спасибо, попробую что-то подобное сделать.

 

 

"размазанной(blur effect)." - полагаю только на js

можно и на CSS сделать. Но не будет работать в старой опере и ослах ниже IE10 

 

Тогда не катит. Вообще, тогда можно обойтись без этого эффекта, тогда просто фон поменять и прочрачность на 40%, к примеру - это знаю как сделать.

Но вот передо мной теперь такой вопрос:

Допустим еть 3 разных картинки и, когда повяляется кнопка "Поделиться"(share) то как сделать, что бы именно эта фотка была "отправлена" через функцию "поделиться" ? Использовать скрипты, которые тут: http://share42.com/ru ??? Или как это вообще можно реализовать, с PHP, что-ли ?

Простыми словами: Хочу сделать так, что бы можно было поделиться этой картинкой в соц. сеть, к примеру, ВКонтакте. При наведении на картинку №1 нажимаю иконку ВК и делюсь ею там,  тоже самое делаю и с картинкой №3 - На моей стене будут картинки 1 и 3.