Question

I am trying to create some jquery styled hover fade in/out thumbnails. I’ve managed to do the hover in and out on the images but theres a problem. As the user hovers over, I want some text to appear, which I have achieved with CSS, the problem is, when the user hovers over the text the image fades back in. I was wondering how I could make it so the image continues to stay faded out whilst also hovering over the text. I do not want the text to become faded either, I have tried simply switching to the thumb class in the script section.

<script>
$(document).ready(function(){
    $(".thumb img").fadeTo("fast", 1.0); // This sets the opacity of the thumbs to fade down to 60% when the page loads

    $(".thumb img").hover(function(){
        $(this).fadeTo("fast", 0.3); // This should set the opacity to 100% on hover
    },function(){
        $(this).fadeTo("fast", 1.0); // This should set the opacity back to 60% on mouseout
    });


});
</script>

HTML

<div class="thumb">
 <a href="#"><img src="images/hooty_thumb.png" width="250" height="224"/></a>
 <div class="title">
<h1 class="din"><a href="#">TITLE HERE</a></h1>
<h2><a href="#">Branding, Print, Web</a></h2>
<h2><a href="#">2011</a></h2></div></div>

CSS:

.thumb {float: left; background-color: #FFF; z-index: 1; width: 250px; height: 225px; margin-right: 27px; margin-bottom: 45px; display: inline-block; *display:inline; *zoom: 1; position: relative;}
.thumb .title{position:absolute; width: 250px;  top: 40%; left:0%; text-align: center; display: none; z-index: -1;}
.thumb:hover .title{display: inline; z-index: 1;}
.thumb .title h1{color:#00F;}

Answer 1

Here you go, You needed to go up one level and attach the rollover events to the parent then traverse the DOM to the image and set its opacity. *Side Note $(document).ready(function(){ }) is same as $(function(){ })

$(function(){
    $(".thumb img").fadeTo("fast", 1.0); 

    $(".thumb").bind({
        mouseenter:function(){
            $('img', this).fadeTo("fast", 0.3);
        },mouseleave: function(){
            $('img', this).fadeTo("fast", 1.0); 
        }
    });
});