Search code examples
htmlcsshovertooltip

When hover on image, 0.5 opacity for link images and no opacity for tooltips

HTML Code, CSS code, and Result

I want the behavior of the links when in hover state, the link will have an opacity of 0.5 then the tooltip will appear but with an opacity of 1.

As you can see on the photo, when in hover state, both the link and the tooltip have an opacity of 0.5.

I tried adding this:

.tooltip-text:hover{opacity: 1;}

My guess is, maybe the opacity of .img_links is overriding any changes in opacity made with .tooltip-text because they are one element of anchor tag element??

Any help will be appreciated. Thanks.

Solution

  • Since the tooltip is a child of .img_links, if you lower the opacity of .img_links, the tooltip can never get more opaque than it's parent.

    replace 

    .img_links:hover { opacity: .5 }

    with

    .img_links img:hover { opacity: .5 }

    Or move the tooltip out of the img_links container.