Changing opacity of other element on hover, using jQuery in Wordpress

Question

I want to change the opacity of other elements on a hover using jQuery on my Wordpress site.

Here is an example: http://www.casinotitan.im/ (firefox gives the best result)

<div class="container">

<div class="example">
    <img src="example.png" alt=".." class="img-example" />
</div>

<div class="example">
    <img src="example.png" alt=".." class="img-example" />
</div>

<div class="example">
    <img src="example.png" alt=".." class="img-example" />
</div>

I also want to insert this script into a Wordpress page (my homepage), but I don't understand what the procedure is to get jQuery up and running.

Answer 1

This should do the job:

$(".example").hover(function() {
    $(".example").not($(this)).toggleClass("translucent");
});

CSS:

.translucent {
    opacity: 0.2;
}

You can see it in action at: http://jsfiddle.net/sUnh8/1/

Check the comment by @maxzeroedge on how to get jQuery up and running.