How to use different CSS opacity in a nested div? [duplicate]

StackOverflow https://stackoverflow.com/questions/23107605

  •  04-07-2023
  •  | 
  •  

Frage

Premise: I would not use "Position" absolute/relative/z-index etc. since I'm working with Bootstrap and the less I use pixel measures, the better is. I also saw some similar questions, but I didn't find a good soluted, neither with rgba* nor with z-index

I have 2 nested divs.

<div id="div1" style="background-image:url('background.png')">
    <div id="div2" style="opacity:0;">
         Some text
    </div>
</div>

So: I have an image set as background of div1. Inside div1 (precisely in the center of it) there is div2 which consists of nothing else than a text. In the beginning the image has full opacity (1.0) and the text is not visible (opacity: 0).

On hover I want the image have opacity: 0.6 but the nested div (the text) must have opacity: 1.0 (full opacity)

I tried to simply apply different opacity to the 2 divs but the nested div inherits opacity:0.6 from div1.

Further, I tried to play with a different background (including the text) but this causes graphical artifacts and it's not really optimal. I also tried by adding !important to opacity:X , but nothing changes.

Any suggestion?

Thanks in advance.

War es hilfreich?

Lösung 

#div1
{

}
#div2
{
opacity:0.5;
}

#div1:hover
{
opacity:0.6;
position: relative;
}
#div:hover > :after
{
opacity: 0.5;
position: absolute;
height: ...;
width: ..;
}
#div1:hover > div1
{
position: relative;
height: ...;
width: ..;
opacity:1
}

Andere Tipps

You need use two images (one transparent one to full opacity and change it during hover effect)

CSS

#div1 {
    background:img-1.png;
    text-indent:-9999px;
    overflow:hidden
}
#div1:hover {
    background:img-2.png
    text-indent:inherit /*works if you have normal text-indent on your parent element*/
}
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top