[RobertSkii]

I am trying to make a div with .hover() that changes opacity when hover on and off. The problem is that I create a div and it inherits the opacity from the parent.

Here is the piece of jquery code

 $(".image-box").hover(
                function(){$(this).css("opacity","0.6"), $(this).append("<div>Read More +</div>")},
                function(){$(this).css("opacity","1"), $( this ).find( "div:last" ).remove();}
            );

and here is the html

<div class="image-box">
                    <img class="info-img" src="https://quest.bloomu.edu/wp-content/uploads/2012/04/summer-camp-2.jpg" alt="" />
                </div>

and the css where I tried to change the opacity but didn't work

.image-box div{
            font-size: 3em;
            color: black;
            position: relative;
            z-index:2;
            text-align: center;
            top: -60%;
            bottom: -20%;
            left: 2%;
            opacity: 1;
            border-style: solid;
            border-color: black;
            width:95%;

        }

is there a way to disable the opacity on the child? thank you!

[andrewsw]

As I recall the solution is to use RGBA/HSLA or a transparent PNG. (An odd solution is to rearrange the elements so that the child elements are no longer children of the troublesome parent.) More info can be found on searching "jquery opacity is inherited".

[That's not huge sogging longbottoms as someone suggested, but hue, saturation and lightness (and alpha).]

[RobertSkii]

I tried using

.css("background-color","rgba(255,255,255,0.6")

and changing the color from the div to background-color: rgba(255,255,255,1) but didn't change at all

instead of

.css("opacity","0.6")

am I doing it wrong? I haven't used rgba that much

[andrewsw]

There's a bracket missing.