CODEWITHSUNDEEP
cssz-index
1011 1110
1011 1110

Reputation: 781

Why is transparency being applied to my text?

I have text over a transparent background as shown here:

http://jsfiddle.net/L9ggc06c/

However, the text is still applying the transparency.

#content a:hover .text p{
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";  
    opacity:1.0 !important;
    color:#FFF; 
    font-family: 'ralewayregular';
    font-size: 200%;
    text-transform: uppercase;
    overflow:hidden;
    position: relative;
    z-index: 50;
    text-align:center;
    height:100%;
    width:100%;
    margin-top: 20px; 
}
#content a:hover .text {
    display:block; 
    position:absolute;
    top:50%;
    left:0;
    height:75px;
    width:100%;
    margin-top: -37px;
    background-color: rgb(0,0,0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";  
    opacity: 0.7;   
}

I've given the paragraph position:relative and a z-index: 10, which solved my last situation. However it didn't this time. Any help would be appreciated.

Upvotes: 0

Views: 147

Answers (3)

isherwood
isherwood

Reputation: 61083

The child element has 100% of the 70% transparency its parent element has. This is expected behavior. You would need use absolute positioning on the paragraph and make it a sibling element to take it outside the influence of the parent.

Demo

#content .text {
    position:absolute;
    top: 50%;
    left: 0;
    right: 0;
    ...
    opacity: 0;
    transition: all .3s;
}
#content a:hover .text {
    opacity: 1;
}

Upvotes: 2

feelitloveit
feelitloveit

Reputation: 16

Opacity sets all the contents of the div to opacity set. You can try something like this:

<div class="overlay">
  <div class="blackBar"></div>
  <a>Overlay text</a>
</div>

This is just a demo, you will have to apply this to your case!

Upvotes: 0

huangeric89
huangeric89

Reputation: 23

Use rgba( ) to output background opacity.

you can do something like this: 

#content a:hover .text p{
color: #fff; 
}
#content a:hover .text {
background-color: rgba(0,0,0, 0.2);
}

Upvotes: 0

Related Questions