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?

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/

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.