Wsparcie » Motywy » Zmiana koloru obrazka po najechaniu myszką

  • PrestigeBar

    (@prestigebar)


    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)

    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.