Good day! There is a block in which pictures are superimposed by means of postion absolute . Help make only one transparent image. I tried it this way and that and everything is exactly my everything becomes transparent ...

I assigned IDs and classes and nothing comes out, I don’t understand at all how it is.

 .browseBlock { position: relative; width: 300px; height: 300px; } .browseBlock img { width: 300px; height: 300px; } .ono { position: absolute; top: 0; left: 0; width: 100px; height: 100px; } .ono img { width: 100px; height: 100px; } 
 <div class="browseBlock"> <div class="ono"> <img src="http://logotipka.ru/images/stories/skachat_img/icons/icons4.jpg" title="" alt=""> </div> <img style="opacity: 0.5" class="glavn" src="http://logotipka.ru/images/stories/Skachat_new_year/new_year55.jpg" title="" alt=""> </div>

2 answers 2

 body { background: #272727; } .browseBlock { position: relative; width: 300px; height: 300px; } .browseBlock>img { width: 300px; height: 300px; position: absolute; z-index: -1; } .ono { position: absolute; top: 0; left: 0; width: 100px; height: 100px; } .ono img { width: 100px; height: 100px; opacity: 0.5; } 
 <div class="browseBlock"> <div class="ono"> <img src="http://logotipka.ru/images/stories/skachat_img/icons/icons4.jpg"> </div> <img class="glavn" src="http://logotipka.ru/images/stories/Skachat_new_year/new_year55.jpg"> </div>

    If you mean that it becomes transparent

     <div class="ono"> <img src="http://logotipka.ru/images/stories/skachat_img/icons/icons4.jpg" title="" alt=""> </div>

    then add to

     .ono {z-index: 10;}