How can I change the different opacity rate of an element inside of another

Question

I have a button that changes opacity with :hover, but inside there's an image that shouldn't be affected by the button's opacity change.

For example, something like this:

.expandIMG:hover{
  opacity: 0.6;
}

.expandIMG:hover,div,img{
  opacity: 1; // this make no opacity but for all the button an i just want    
              // the image that are inside of some div.
}

If I'm understanding correctly, a child element cannot have an opacity higher than the parent. — Devin, Feb 10 '15 at 01:13
@Devin , i think your right, The parent's opacity controls all children — Jacob G, Feb 10 '15 at 01:15

score 1 · Answer 1 · answered Feb 10 '15 at 01:17

I think you're trying to change the opacity of the div containing the image to 0.6 while keeping the image's opacity at 1.

You can accomplish this using background: rgba(0,0,0,1) instead of opacity:

.expandIMG {
    background: rgba(0,0,0,1);
}

.expandIMG:hover{
  background: rgba(0,0,0,0.6);
}

This way, you're only changing the alpha (opacity) of the div's background while the images inside it aren't affected.

Example: http://jsfiddle.net/2krc5080/

score -3 · Answer 2 · edited May 23 '17 at 12:05

-3

You could also try to set the z-index of the image higher while hovering. And maybe this answer is also useful to you.

.expandIMG:hover img {

  z-index: 9999; // more than the expandIMG 

}

Come on please give me more downvotes!! Feed me!!

edited May 23 '17 at 12:05

Community

1
1

answered Feb 10 '15 at 01:05

warrenG

5
2

Number 1: z-index does not work on static positioned elements! – Jacob G Feb 10 '15 at 01:27

How can I change the different opacity rate of an element inside of another

2 Answers2