CODEWITHSUNDEEP
javascriptjquerycss
Hristian Ivanov
Hristian Ivanov

Reputation: 53

Opacity on a div hover

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();
});

Upvotes: 5

Views: 152

Answers (6)

Daniel Imms
Daniel Imms

Reputation: 50269

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

Upvotes: 3

isherwood
isherwood

Reputation: 61114

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;
}

Upvotes: 0

Vimal Stan
Vimal Stan

Reputation: 2005

Is this what you're looking for? 

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

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

Upvotes: 0

sasi
sasi

Reputation: 4328

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

Upvotes: 0

Pavel Štěrba
Pavel Štěrba

Reputation: 2912

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();
});

Upvotes: 0

James Donnelly
James Donnelly

Reputation: 128856

...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.

Upvotes: 5

Related Questions