Opacity on a div hover

Question

So far I've got this code

http://jsfiddle.net/Nq79H/1/

but I want to fadeout the image in order to leave only the text visible. Do I need to change the javascript or write a new css div?

$('.text').hide().removeClass('text').addClass('text-js');

$('.thumb').hover(function(){
    $(this).find('.text-js').fadeToggle();
});

Answer 1

...but I want to fadeout the image in order to leave only the text visible.

Simply add .fadeToggle() to the img element as well:

$('img', this).fadeToggle();

JSFiddle example .

Answer 2

Here is the CSS3 transition solution:

jsFiddle

CSS

.thumb .text {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #999;
    background: rgba(0, 0, 0, 0.3);
    text-align: center;
    -webkit-transition:opacity .5s ease;
    -moz-transition:opacity .5s ease;
    transition:opacity .5s ease;
    opacity:0;
}
.thumb:hover .text {
    opacity:1;
}

.thumb img {
    opacity:1;
    -webkit-transition:opacity .5s ease;
    -moz-transition:opacity .5s ease;
    transition:opacity .5s ease;
}
.thumb:hover img {
    opacity:0;
}

Support

The support for CSS3 transitions is pretty decent now, the latest versions of all the major browsers (Safari, Chrome, Opera, Firefox) all support transitions. IE on the other hand only supports it from version 10. Transitions are nice though in that they don't crash and burn when something doesn't support it. The opacity of the element will still change, there will just be no transition.

References

• Caniuse.com transitions

Answer 3

If you want to fadeIn text and fadeOut image, just add one more line:

$('.text').hide().removeClass('text').addClass('text-js');

$('.thumb').hover(function(){
    $(this).find('.text-js').fadeToggle();
    $(this).children("img").fadeToggle();
});

Answer 4

$(this).find('img').fadeToggle();

Answer 5

Is this what you're looking for?

$('.thumb').hover(function(){
$(this)
    .find('.text-js')
        .fadeToggle()
    .end()
    .find('img')
        .fadeToggle();
});

http://jsfiddle.net/Nq79H/4/

Answer 6

No JS or additional HTML needed.

http://jsfiddle.net/Nq79H/11

.thumb img {
    -moz-transition: opacity .8s;
    -webkit-transition: opacity .8s;
    transition: opacity .8s;
}
.thumb:hover img {
    opacity: 0;
}