Jak pokazać obrazek w skali szarości tylko z użyciem CSS i przywrócić mu kolory po najechaniu kursorem?

Question

No właśnie - wiadomo, że można przygotować dwie wersje grafiki, ale czy efekt "wyszarzenia" (utraty koloru) można uzyskać w samym CSS? Najlepiej żeby obraz w skali szarości po najechaniu na niego kursora myszy odzyskał kolory (taki efekt przyda mi się na blogu). Jakieś pomysły? :)

Answer 1

http://designshack.net/articles/css/joshuajohnson-2/

 

tutaj masz pożądany efekt pod nazwą B&W

Comments

Dzięki za linka!

Answer 2

Pokombinowałem w CSS3 przy użyciu przejścia (transition)

Chodzi Ci o taki efekt?

http://jsfiddle.net/peyaLnjj/

#kwadrat
{
    width: 100px;
    height: 100px;
    background-color: grey;
    -webkit-transition: .2s ease-in; //wsparcie dla chrome
    -moz-transition: .2s ease-in; //wsparcie dla mozilli 
    -o-transition: .2s ease-in; //wsparcie dla opery
    transition: .2s ease-in;
             //  ^--wybierasz czas trwania animacji, dalej to jaki efekt szybkości chcesz uzyskać
            // http://www.w3schools.com/css/tryit.asp?filename=trycss3_transition_speed
}

#kwadrat:hover
{
    background: blue;
}

Answer 3

Pożądany efekt można uzyskać dzięki atrybutowi CSS filter.

Przykład:

img {
	-webkit-filter: grayscale(1);
		    filter: grayscale(1);
}

img:hover {
	-webkit-filter: grayscale(0);
		    filter: grayscale(0);
}

 

Answer 4

A tego nie robi się w java script ?

http://stackoverflow.com/questions/10709016/change-image-onmouseover

Pozdrawiam :)