CSS Opacity Not Transitioning

Question

I have created a small tooltip test using a div with an input and p. However, when I try and increase the opacity so that the tooltip effectively fades in and out, something seems to go wrong. I've tried this on Firefox & Chrome so far and can't figure out what the problem is.

FIDDLE: http://jsfiddle.net/2vsts8fv/

Cedric Reichenbach · Accepted Answer · 2015-10-06 09:43:24Z

1

That's because of the display: none property, which applies immediately.

As an alternative, you can use visibility to hide your item, which also plays along well with transitions:

p.tip {
    display: inline;
    visibility: hidden;
    transition: opacity 1s, visibility 1s;
}
div.tooltip:hover > p.tip {
    visibility: visible;
    opacity: 1;
}

JSFiddle

answered Oct 6, 2015 at 9:43

Cedric Reichenbach

9,4197 gold badges58 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Airo Shinobi Over a year ago

Thanks Cedric! I've always steered clear of visibility personally as it still takes up space and can be accessed, for that reason I'd always use display: none but I think in this instance, visibility is probably best! Thanks again!

sperovic · Accepted Answer · 2015-10-06 09:44:46Z

1

That is because you are using display: none. Try visibility: hidden and give a better position through CSS.

answered Oct 6, 2015 at 9:44

sperovic

737 bronze badges

Collectives™ on Stack Overflow

CSS Opacity Not Transitioning

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related