Sibling element inheriting opacity? - html

Question

I'm working on a site right now where I've got to have some images that, on hover, dim and display some text (price, item name, etc.). So I've got a for the wrapper, and then a for the image itself and a for the overlay text. The image div and the overlay div are children of the wrapper.
The wrapper has position: relative, and the image and overlay have position: absolute. The image div has a z-index of 10, and the overlay a z-index of 0. On hover, the image dims to 50% opacity, and the text appears, just like it should. Except... wherever the text is in contact with the image, it also has 50% opacity. Text outside of the image has normal opacity.
How do I make it so that all of the text has an opacity of 1?
HTML:
<section class="first-section">
<div class="outfitcontainer">
<div class="outfit">
<img src="purelyoutfit1.png" width="100%" height="100%"/>
</div>
<div class="overlay">
<p class="price">$350<s> $4200</s></p>
<p class="item">FURR COAT</p>
<p class="designer">Antonio Marras</p>
</div>
</div>
</section>
CSS:
.first-section {
width: 80%;
margin-left: 10%;
background-color: #FFFFFF;
height: auto;
}
.outfitcontainer {
position: relative;
float: left;
width: 20%;
height: auto;
background-color: #FFFFFF;
margin: 25px;
}
.outfit, .overlay {
position: absolute;
width: 200px;
height: auto;
top: 0;
left: 0;
}
.outfit {
z-index: 10;
background-color: white;
}
.outfit:hover {
opacity: .5;
cursor: pointer;
}
.overlay {
z-index: 0;
text-align: center;
font-weight: bold;
}
.overlay p {
display: block;
padding: 30px 0;
color: black;
}

Answer 1

The easiest route to go would be to not make the image opaque, but have the overlay create that opacity for you. If you give the overlay an opaque background(either with css or an png image), you will be able to pull off exactly what you need.
A few code modifications should help solve the problem.
HTML
<section class="first-section">
<div class="outfitcontainer">
<div class="overlay">
<div class="text">
<p class="price">$350<s> $4200</s></p>
<p class="item">FURR COAT</p>
<p class="designer">Antonio Marras</p>
</div>
</div>
<img src="http://i.imgur.com/hDLwTh8.gif" width="100%" height="100%"/>
</div>
</section>
CSS
.first-section {
width: 80%;
margin-left: 10%;
background-color: #FFFFFF;
height: auto;
}
.outfitcontainer {
position: relative;
float: left;
width: 20%;
height: auto;
background-color: #FFFFFF;
margin: 25px;
}
.outfit, .overlay {
position: absolute;
width: 200px;
height: auto;
top: 0;
left: 0;
}
.overlay {
height: 400px;
display: none;
background: rgba(255, 255, 255, 0.5);
text-align: center;
font-weight: bold;
}
.overlay p {
display: block;
padding: 30px 0;
color: black;
}
img {
width: 200px;
position: absolute;
height: 400px;
}
.outfitcontainer:hover > .overlay {
display: block;
}
.outfit {
z-index: 10;
background-color: white;
}
.outfit:hover {
cursor: pointer;
}

Answer 2

Try this:
.yourClass > *{
opacity:1;
}.yourClass > *:hover{
opacity:1;
}
Good Luck!