Geek asks and answers

Opacity on a div pair

I still have this code

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

but I want to fade out the image so that only the text is visible. Do I need to change javascript or write a new css div?

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

$('.thumb').hover(function(){
    $(this).find('.text-js').fadeToggle();
});
+5
source share
6 answers

... but I want to fade out the image so that only text is visible.

Just add .fadeToggle()to the element img:

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

JSFiddle example .

+5
source

Here is a 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

CSS3 , (Safari, Chrome, Opera, Firefox) . IE, , 10. , , , - . - , .

+3

If you want fadeIn text and a fadeOut image, just add another line:

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

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

Is this what you are looking for?

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

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

0
source

No need for JS or additional HTML.

http://jsfiddle.net/Nq79H/11

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

More articles:


All Articles