CSS Tutorial for Beginners - 56 - Opacity property Part 1 - Working against a DIV Video Lecture | Learn CSS: A Comprehensive Tutorial for Web Developers - Front-End Programming

over the next several videos we're going
to take a look at some CSS effects and
most of these involve css3 now some of
the functionality is existing
functionality but a lot of this stuff is
new with css3 and we'll be covering
opacity gradients and even combined
opacity ingredients and also cover box
shadows and any other subjects that I
can think of but in this video we're
first going to cover opacity which is
the easiest and then we'll move into
some more complex subjects like
gradients and box shadows so you can see
here I've created two div sections and
I've given them IDs of box 1 and box 2
and they have exactly the same CSS rules
so they are both blue essentially blue
squares now the default opacity for
every element is always 1.0 the values
range from zero point zero which is full
opacity all the way up to 1.0 which is
no opacity and as I said the default
value is always 1.0 as it should be so
there's no transparency at all within
these sections and that's the word
you'll hear also even though the
property is opacity you'll hear that
buzzword transparent making your
elements transparent so we're going to
keep box one the same so we have
something to compare against so this
will remain at an opacity of 1.0 but box
two we're going to go ahead and put in
the opacity property so it is opacity
and let's go ahead and give this a value
of 0.4 and of course we need a semicolon
so let's go ahead and save this let's
refresh our page and there you can see
this is now looking somewhat transparent
now if we set this down to the lowest
setting which is zero point zero this
should disappear completely and you can
see it did this is now completely
transparent and there may be some cases
you will want to do that we'll talk
about that in future videos let's go
ahead and set this back to 0.5 so it'll
be at the halfway mark and we'll refresh
our page and there you can see it's back
and it's somewhat transparent now
usually with the opacity property you're
also going to set up a hover effect with
this so let's go ahead and do that right
down here and you'll remember this is a
pseudo selector but first we need to use
our ID selector first so let's go ahead
and do that and you'll remember that
always starts out with a pound sign and
we'll type in box
- then of course a colon is what
identifies this as a pseudo selector and
of course the state that we want to
alter is over so that's the one we're
going to use and then of course we need
the famous squiggly brackets now what
we're going to do here is set the
opacity to full and this will give kind
of a nice transition so when we hover
over our element people will know that
they are over and over the element
because the transparency will disappear
and in order to do that of course we
need to set this to the highest setting
which is 1.0 so when they hover over
this element now it should be completely
visible so let's go ahead and save this
let's refresh our page and when we hover
over it look there is now no opacity
over on and off and you can see the
effect we get so this is a nice little
effect a lot of people will use with
their webpages now of course in this
video we did this for an entire section
but you can also do this against images
so those are really the two main uses of
opacity you'll use it against the
section or you'll use it against an
image so in the next video we'll
actually do this against an image and
this will be very similar to what we do
here we're just going to use it against
a IMG element so we'll do that in the
next video see you guys