Is there a workaround to make a child's opacity 1 with the visibility attribute?

I just read the blogarticle underneath.. & it's saying there is no possibility to make a child's opacity 1 if the parent is 0.

https://martinwolf.org/blog/2014/08/make-an-element-inside-a-hidden-element-visible-with-css

this is my CSS:

.et_pb_blurb_container {
visibility: hidden;
}

.et_pb_module_header {
    visibility: visible;
}

.et_pb_main_blurb_image:hover ~ .et_pb_blurb_container {
visibility: visible;
}

The purpose is.. when the image (icon) is hovered a container will pop up. But there is a header (title) in the container that I want to show all the time because it's the meaning of the image (icon).

So what happens is.. the container is hidden. When I hover the icon the container returns visible and the title too.

But when I set the opacity of the container to 0 and the title opacity to 1.. it does not work. I want to create a transition delay (animation).

The HTML simplified:

<div class="et_pb_blurb_content">
    <div class="et_pb_main_blurb_image"> icon </div>
<div class="et_pb_blurb_container">
    <h4 class="et_pb_module_header"> title </h4>
    <div class="et_pb_blurb_description">
Just some text
    </div>
</div>
</div>

My question: is it possible to make the childs opacity 1? Because I want a nice fade in and out transition of the container while the title is always visible.