m0onio
m0onio

Reputation: 213

How do the opacity values work?

I want to set the opacity of the draggable in my drag and drop game, but I dont really know what the numbers mean...

Can someone explain how I would make it really noticable when hovered over?

$('.drag').hover(

function() {
$(this).stop().animate({
    opacity: "0.8"
});
}, 
function() {
$(this).stop().animate({
    opacity: "1"
});
});

Upvotes: 1

Views: 766

Answers (1)

Ben Everard
Ben Everard

Reputation: 13804

Think of it 0 = 0%, 1 = 100%.

So for instance, if you want something to be 50% transparent set the number to 0.5, if you'd like something completely transparent choose 0. Something with a value of 0.9 will be only very slightly transparent.

This forks for rgba too, for instance:

rgba(0, 0, 0, 0.5)

...will produce a grey colour, as we're starting with black and making it 50% transparent (depending on the background of course).

Can someone explain how I would make it really noticable when hovered over?

Set the hover value to something really low, for instance 0.4, that'll be obvious, you may decide to continue tweaking the opacity until the hover and normal state compliment each other well.

Upvotes: 3

Related Questions