Opacity affects the way elements are hidden by another element - html

Question

I was playing with the opacity attribute and wrote the following code:
#outer {
width: 500px;
height: 500px;
background: pink;
margin: 50px;
position: relative;
}
.item {
width: 50px;
height: 50px;
margin-right: 10px;
background: black;
opacity: 0.5;
float: left;
}
.inner {
width: 500px;
height: 500px;
background: red;
display: none;
position: absolute;
left: 0;
top: 0;
}
.item:hover {
opacity: 1;
}
.item:hover .inner {
display: block;
}
<div id="outer">
<div class="item">
<div class="inner"></div>
</div>
<div class="item">
<div class="inner"></div>
</div>
<div class="item">
<div class="inner"></div>
</div>
<div class="item">
<div class="inner"></div>
</div>
</div>
I wanted the inner div to show up and cover its parent item div when its parent item div is hovered. Because all the other item divs are set to be transparent to show through the inner div and only the hovered item div's opacity is changed to 1, I expected only the hovered item to be covered. However, all the item divs before the hovered one are also hidden. What happened?

Answer 1

Your issue is with absolute positioning: it's relative to "containing block", which is not the parent, but the ascendent element with a non-static position (in your case, the #outer element).
Simply addd position: relative to .item, and it will become the containing box.
Note that this has nothing to do with opacity.
Working snippet:
#outer {
width: 500px;
height: 500px;
background: pink;
margin: 50px;
position: relative;
}
.item {
width: 50px;
height: 50px;
margin-right: 10px;
background: black;
opacity: 0.5;
float: left;
position: relative;
}
.inner {
width: 500px;
height: 500px;
background: red;
display: none;
position: absolute;
left: 0;
top: 0;
}
.item:hover {
opacity: 1;
}
.item:hover .inner {
display: block;
}
<div id="outer">
<div class="item">
<div class="inner"></div>
</div>
<div class="item">
<div class="inner"></div>
</div>
<div class="item">
<div class="inner"></div>
</div>
<div class="item">
<div class="inner"></div>
</div>
</div>

Answer 2

I've used some and inspired jquery tabs to make it easier
$(function(){
$('.item').hover(
function(e){
$('.item').removeClass('hover')
$(this).addClass('hover')
$('.content').removeClass('show')
var content = $(this).attr('data')
$(content).addClass('show')
},
function(e){
$('.item').removeClass('hover')
$('.content').removeClass('show')
}
)
})
#outer {
width: 500px;
height: 500px;
background: pink;
margin: 50px;
position: relative;
}
.btn{
position:absolute;
left:0;
top:0;
z-index:2
}
.btn .item {
width: 50px;
height: 50px;
margin-right: 10px;
background: black;
opacity: 0.5;
float: left;
position: relative;
-webkit-transition: all 0.2s; /* Safari */
transition: all 0.2s;
}
.content {
width: 500px;
height: 500px;
background: red;
position: absolute;
left:0;
top: 0;
z-index:1;
text-align:center;
opacity: 0;
-webkit-transition: all 0.2s; /* Safari */
transition: all 0.2s;
}
.item.hover {
opacity: 1;
}
.content.show{
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outer">
<div class="btn">
<div class="item" data="#content1"></div>
<div class="item" data="#content2"></div>
<div class="item" data="#content3"></div>
<div class="item" data="#content4"></div>
</div>
<div class="content" id='content1'>content 1
</div>
<div class="content" id='content2'>content 2
</div>
<div class="content" id='content3'>content 3
</div>
<div class="content" id='content4'>content 4
</div>
</div>