CSS, JQuery, Javascript: Image Hover and Click Effects

This project was successfully completed by hoangquocdat for $127.5 USD in 6 days.

Get free quotes for a project like this
Employer working
Completed by:
Skills Required
Project Budget
$100 - $150 USD
Completed In
6 days
Total Bids
Project Description


To get a first impression about the visual image effects I need please have a look to this website: [url removed, login to view]
That image wall and the effects are basing on Flash, I know. And I want this (or very similar) effects made with CSS, JQuery and Javascript. I made some researches today to find out if this is possible and obviously it is. At the bottom of this project description you find some source code ressources and examples. Some are not for free but if you need one of them I will buy that sources.

(For the detailed project description please have a look below)

## Deliverables

I think 80% of this project's work is to rebuild the image effects from the flash demo site I posted above. I only need two more adjustments.

1. If the user click on one of the images an icon should appear. To imagine this effect please have a look to this website: [url removed, login to view] In the first example block "Catures, Galleries & Navigation" I like the demonstration of the bottom left rat (with the upcoming arrow pointing to the right)

2. If the user click on that upcoming icon a JS alert box should come up and say "hello". This makes no sense of course but I can later fill this JS function with more senseful code ;-) When a click onto an image (or better: onto the icon over that image) have happened, this image must be greyed out and a green check mark icon must be overlaying this image. I will provide you with the check mark icon graphic if you want. And any further click on such an image that was pressed before and greyed out with the green check mark icon doesn't effect anything anymore.

Finally please add such audio effects when the mouse cursor moves over the images like on the flash demo website I posted above. And a audio effect when the user click on the upcoming arrow icon would be great. That's it!

This scripts you build will later be implemented into a PHP website. There the images are loaded dynamically into the browser. Also the name of the person which is displayed on the image and a unique id is provided. Your script should display the name when a user click on an image like the text "Perfect Segues" in the demo with the rat on [url removed, login to view] The unique id will be passed to a JS when the user click on the icon over an image. In which way the name informations and unique ids are delivered to your script doesn't matter. I can provide them in a JS array for example.

Here are some code source ressources which may be interesting for you:
- [url removed, login to view] (the first two rows may be interesting for you)
- another technical inspiration may be this one: [url removed, login to view]

Your scripts must support Chrome, Internet Explorer, Firefox in the current versions. The examples on the websites I posted here do work in all browsers.

Looking to make some money?

  • Set your budget and the timeframe
  • Outline your proposal
  • Get paid for your work

Hire Freelancers who also bid on this project

    • Forbes
    • The New York Times
    • Time
    • Wall Street Journal
    • Times Online