Jak uzyskać następujący efekt?

Question

Witam wszystkich bardzo serdecznie. Jestem nowym użytkownikiem i jest to moje pierwsze pytanie. Jednakże kursy pana Mirosława przerobione po kilka razy :) 

A teraz przechodząc do pytania. Mianowicie chciałbym się dowiedzieć jak uzyskać efekt jak na stronie: http://eminem.com . Mam na myśli obrazki które po najechaniu zmieniają kolor (poprzez animację JQuery podejrzewam) z szarego na kolorowy, a animacja ta wygląda jak takie wyostrzenie powolne zdjęcia.

Można pisać gotowy skrypt, gdyż sam piszę (początkujący) w JQuery :)

Pozdrawiam serdecznie,

Primosdace 

Answer 1

Jak kolega wcześniej napisał hover w css, można dodać transition jeśli chcesz mieć efekt płynnego przejścia.

http://jsfiddle.net/tdpcrqLv/

Oczywiście można to zrobić w js ale po co sobie komplikować życie.

Answer 2

A może po prostu zwykła podmiana obazu w css'ie? po hoverze oczywiście

Answer 3

Zajrzyj tutaj: http://webprojektant.pl/css/115-css-zmiana-i-rozjasnienie-obrazka-po-najechaniu-kursorem

Pozdrawiam

Comments

Dziękuje serdecznie za pomoc :)

Answer 4

Są jeszcze filtry w css3: http://html5-demos.appspot.com/static/css/filters/index.html

Comments

Pomocna strona. :)

---

A wszystkie te opcje są już wspierane? Jak ostatnio sprawdzałem (sporo czasu temu) to blur czy efekt b&w nie były.

---

Zależy gdzie i zależy czy z prefiksami. Na chwilę obecną najlepsze wsparcie powinno być w blinku

Answer 5

http://webroad.pl/html5-css3/670-filtry-graficzne-w-css3-przyszlosciowa-edycja-zdjec

Robisz diva o danym filtrze a w div:hover dajesz brak filtru i gotowe :)

Answer 6

Za pomocą css zrobisz coś takiego bez problemu (no i może np. gimp czy ps). Stwórz kopię obrazka kolorowego i przerób go na czarno-biały. Potem za pomocą hover w css podmień obrazek czarno-biały na kolorowy i ustaw animację na np. 0.5 ;)