Applying opacity to a image causes the absolute div also transparent

Question

I have a image gallery of the following structure :

<div class="gallery">
    <div class="message">
        Welcome to gallery
    </div>    
    <img src="http://placehold.it/300x300" />
</div>   

And the CSS :

.message {
    position:absolute;
    left:10px;
    top:20px;
    height:30px;
    width:140px;
    background:#333;
}
.gallery img {
    opacity:.85;
}

But this causes the div message also transparent ! How to prevent it and whats the reason for transparency ?

DEMO

Answer 1

You could give the image an id so only the image's opacity is lower

#img{ opacity: 85%; }
<img src="http://placehold.it/300x300" id="img" />

Or you could use a class

.img{ opacity: 85%; }
<img src="http://placehold.it/300x300" id="img" />

So then your could would be something like this:

    <div class="gallery">
    <div class="message">
        Welcome to image gallery
    </div>    
    <img src="http://placehold.it/300x300" class="img"/>
</div>
#img{ opacity: 85%; }
.img{ opacity: 85%; }
.message {
    position:absolute;
    left:10px;
    top:20px;
    height:30px;
    width:140px;
    background:#333;
}

Hope this helps you! Demo

Answer 2

It seems the image is on top of the message div. I just swapped them over like this:

<img src="http://placehold.it/300x300" />
<div class="message">
    Welcome to image gallery
</div>   

And that fixed it for me.

fiddle

Another way is to give the message a z-index like this:

.message {
    position:absolute;
    left:150px;
    top:20px;
    height:30px;
    width:140px;
    background:#333;
    z-index: 2;
}

.gallery img {
    opacity:.85;
}

fiddle