Zmiana koloru obrazka po najechaniu myszką

  • PrestigeBar

    (@prestigebar)


    11 years, 2 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)
  • E-ntuzjasci

    (@entuzjasci)

    11 years, 2 months temu

    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.