Jquery hover and mouseover problem

[devianleong]

Hi guys, I want to hover all the images and show the image with colour when mouseover (remove hover when mouseover). I hover it by using this line of code and it's work fine but I do not know how to add mouseover method to change fadeTo value become (400,1):

jQuery(window).load(function() {
    $('#grid div.thumb').fadeTo(400, 0.1);
            $('#grid div.thumb').each(function() {
                $(this).removeClass('no_overlay');
            }); 
});

this is my html:

<div id="grid" class="clearfix">
            <div class="thumb" id="1" data-project-categories="video">
                <a href="portfolio/video-and-slider.html" title="Video and Slider">
                    <img src="images/portfolio/341-384x263.jpg" alt="Video and Slider">
                </a>
            </div>
            <div class="thumb" id="12" data-project-categories="music">
                <a href="portfolio/soundcloud.html" title="SoundCloud">
                    <img src="images/portfolio/content-width-old-stereo-384x263.jpg" alt="SoundCloud">
                </a>
            </div>
            <div class="thumb" id="3" data-project-categories="photography">
                <a href="portfolio/photo-filters.html" title="Photo Filters">
                    <img src="images/portfolio/401-384x263.jpg" alt="Photo Filters">
                </a>
            </div>
            <div class="thumb" id="4" data-project-categories="video">
                <a href="portfolio/new-york.html" title="New York" data-caption="Biotopes New York <span>full width video project</span>">
                    <img src="images/portfolio/22-384x263.jpg" alt="New York">
                </a>
            </div>
            <div class="thumb" id="5" data-project-categories="photography">
                <a href="portfolio/black-and-white.html" title="Black and White">
                    <img src="images/portfolio/content-width-woman-attitude1-384x263.jpg" alt="Black and White">
                </a>
            </div>
            <div class="thumb" id="6" data-project-categories="fashion identity video">
                <a href="portfolio/background-video.html" title="Background Video" data-caption="Nero Lingerie <span>full width background video</span>">
                    <img src="images/portfolio/49-384x263.jpg" alt="Background Video">
                </a>
            </div>
            <div class="thumb" id="7" data-project-categories="photography video">
                <a href="portfolio/another-video-project.html" title="Another Video Project">
                    <img src="images/portfolio/content-width-ny-384x263.jpg" alt="Another Video Project">
                </a>
            </div>
    </div>

Any idea?

maybe:

http://www.iliasiovis.com/hoverizr/

[pixelsoul]

The jQuery extension that iamthwee provided looks pretty decent. If you were still wanting to see an example of how you could have coded this (or in this case, how I might have done it), here is a fiddle I have that should help http://jsfiddle.net/pixelsoul/WzrKW/