SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Feb 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Color Image -> Grayscale on Hover

    I've been trying to figure out how to make a grayscale hover effect using one image (no sprites).

    I've come across the following demo:
    http://www.ajaxblender.com/article-s...ale/index.html

    But that changes the image upon clicking the button. Is it possible to change this to do it upon image hover?

    Thank you for your time.

  2. #2
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Ther example on ajaxblender creates a Canvas element with the colour version of the image and then modifies it to be grayscale. Of course, this could be done on hover rather than click as well.

    Web Designer Wall has a tutorial on this that might be helpful: http://webdesignerwall.com/tutorials...le-image-hover
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •