Opacity has to do with how see-through something is. Think of opaque glass where the light comes through, but you can’t really see anything well through it. This effect is really more like translucency, how much you can see through. Here’s an example from this site.

Page example

<div class="game sail"> <div class="overlay"> <h1> Sailing</h1> <p> There are battle type ships with more(cuts off)</p> <a href="#"> <span class="learn">Learn More</span> </a> </div> <!--end class  overlay--></div> <!--end class sail-->

The “game” class refers to that whole image section. Each section has its own background image, so I gave each image its own class as well. This section above has the classes game and sail. The “game” CSS is applied to each of those sections and the “sail” CSS applies just to this one div. You can have more than one class by just listing them like that with just a space between them and no comma. If you declare a second class with another equals sign, it will override the first one, so you have to keep them together like that.

Inside the game div there is an overlay div. This is the see-through part that lays over the picture. I gave it a background color of black and then chose an opacity number. 1 is completely not see through, just black. 0 is completely see through; it becomes invisible. Basically, you will be choosing a decimal for your opacity. Play around to get it the way you like, something from .1 to .9.

.overlay { text-align: center; width: 40%; max-height: 100%; background-color: #000; opacity: .7;  }

You can watch the lesson my youtube channel.