Problem:

  • I need interactive FX when the user hovers over an image.
  • CSS filters are the easiest to add, but they lack FireFox support.
  • It needs to be usable with simple JPGs for greatest compatibility

Solution:

Simply enqueue a jquery plugin jQuery.BlackAndWhite and add the markup.

Issues:

The solution lacks back-end maintainability. Different effects will require other jquery plugins and developer maintenance.

New Solutions:

Use SVG?

  • SVG supports filters
  • SVG filter hack for non-svg images
  • Can you rely on people importing .svg
  • Device support?
  • FooGallery? ;)

Find a plugin:

Broken and not-quite-there plugins that supposedly do this:

  • Image effects generator : Only works when you upload an image by creating new versions of that image with the predefined filters.
  • CSS Thumbnail sprites : Lets you define sprites on an image. Not sure how it works
  • RoundIt Plugin Screenshot: Has an interesting interface which lets you add CSS Border effects when you insert an image. Unfortunately to modify those effects you have to remove the image and re-add it.
  • Pieces Intense animation effects on load
  • Anyhover Image Effects Demo Slightly less intense animation effects on hover

…

Why isn’t there a tool that does this simple effect already?

Is this cross some kind of difficulty line? Where since it’s so easy to plug something in on the theme layer, developers will do that instead of providing an interface? Or is the audience who wants these kind of effects looking for a mega-solution?

For everyone who wants to see the other awesome media presentations from the night, you can watch the stream on YouTube