1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2013
    Rep Power

    Question How to achieve this effect-by css? (grayscale)

    Hi all,
    Now i need to achieve followings effect for our mandarin teachers in shanghai page.
    when your mouse put on this picture it is colorful and when move out mouse and the picture will be gray?
    I search in the google and find this :
    <a href="#" target="_blank"><img alt="Chinese teacher in shanghai-Fiona" onmouseout="this.src='/uploads/1306/111-13060G1421Y50.jpg'" onmouseover="this.src='/uploads/1306/111-13060G142014R.jpg'" src="/uploads/1306/111-13060G142014R.jpg" style="text-align: center; width: 110px; height: 110px;" title="Chinese teacher in shanghai-Fiona" /></a></div>

    But i really want to know the css is useful or not working?
    If you know share with me.
    Many thx!
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2006
    Rep Power
    The code you pasted here is achieved using two images to show image1 on mouseover and replace it with another on mouse out. To achieve this sin css you use css image fading.

IMN logo majestic logo threadwatch logo seochat tools logo