Zmiana koloru obrazka po najechaniu myszką

PrestigeBar
(@prestigebar)

10 years, 5 months temu

Witam,

chciałbym do strony dodać logotypy klientów dla których pracowałem, chciałbym to zrobić na zasadzie szarych/czarnobiałych zdjęć które po najechaniu kursorem myszy zmieniają się w kolorowe.

Przykład tego o co mi chodzi można znaleźć na http://socializer.pl/

Z góry dzięki za odpowiedzi.

Viewing 1 replies (of 1 total)

(@entuzjasci)

Kilka sposobów, które mogą być przydatne:

1. CSS
Dodaj to do własnych styli:

.grayscale {
 -webkit-filter: grayscale(100%);
 -moz-filter: grayscale(100%);
 -ms-filter: grayscale(100%);
 -o-filter: grayscale(100%);
 filter: grayscale(100%);
 filter: url(grayscale.svg); /* Firefox 4+ */
 filter: gray; /* IE 6-9 */
transition:all 0.4s ease-in-out;
-webkit-transition:all 0.4s ease-in-out;
-moz-transition:all 0.4s ease-in-out;
-ms-transition:all 0.4s ease-in-out;
-o-transition:all 0.4s ease-in-out;
}

.grayscale:hover {
  -webkit-filter: none;
  -moz-filter: none;
  -ms-filter: none;
  -o-filter: none;
  filter: none;
}

Plus w części html dodaj klasę do wstawianego obrazka:
<a href="#"><img class="grayscale" src="źródło zdjęcia"></a>

2. Skrypt jquery np ten:
http://gianlucaguarini.com/canvas-experiments/jQuery.BlackAndWhite/demo.html

3. Wtyczki do WP np takie:
http://wordpress.org/plugins/simple-image-manipulator/
http://wordpress.org/plugins/imagefx/

Viewing 1 replies (of 1 total)

Temat ‘Zmiana koloru obrazka po najechaniu myszką’ jest zamknięty na nowe odpowiedzi.

Wyświetlenia