שלום כולם,
מעוניינים להציג תמונה בשחור לבן ווכשנעבור עליה עם עכבר היא תהפוך לצבעונית ?
זה די פשוט וניתן לעשות זאת בחמש דקות
לדוגמא:
Guy playing the ukulele
אז איך עושים את זה, די פשוט, נותנים לתמונה קלאס (Class) בשם grayscale ככה:

<img src="/wp-content/uploads/2015/03/guy-playes-the-ukulele.jpg" alt="Guy playing the ukulele" class="grayscale" />

ואז בקובץ style.css נוסיף את הדברים הבאים:

.grayscale{ 
  border: 1px solid black;
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);  /* For Webkit browsers */
    filter: gray;  /* For IE 6 - 9 */
    -webkit-transition: all .6s ease;  /* Transition for Webkit browsers */
}
.grayscale:hover { 
    filter: grayscale(0%);
    -webkit-filter: grayscale(0%);
    filter: none;
}

וזהו, דיי פשוט…

נתראה

תגובות

הגיבו

3 תגובות

  1. שלום גיא,
    האם אפשר להטמיע את אותו אפקט גם בתבנית וורדפרס?
    אם כן, אשמח לעזרה..
    תודה רבה!

השאירו תגובה

nineteen + 16 =