Sandwich an image between a child and a parent on the z-axis

Question

Right now I'm trying to set up a section with a hidden image that displays on hovering an a tag. The problem is this hidden image should be vertically sandwiched between the child a tag and the parent h2 tag.

A quick mockup of the behavior I'm trying to get: mockup

and here's how I have it set up right now:

.about a {
pointer-events:auto;
}

.about-img {
pointer-events:none;

.about-img:hover {
background-image:url(about-image.jpeg);
background-size:36%;
background-repeat:no-repeat;
background-position:center center;

<section class="about-img">
    <h2>
      <a href="#">Hover Trigger</a>lorem ipsum.
    </h2>
</section>

This works getting me the desired behavior of the image only being visible when the user hovers over the a tag. But I can't figure out a way to get the image underneath the a tag but on top of the rest of the text in the h2.

afaik, you can't give a background-image a z-index. But I don't know how else to get the image to sit flush in the middle, underneath the child a tag but also above the parent h2 tag?

I was trying to avoid using javascript for this, but I'm totally ok with using js if it can get me the behavior I'm after.

Thanks for any advice you can offer!

Answer 1

You could try to set the z index of the image to one higher than the text's z index. You would then have to set the anchor tag's z index higher than the one selected for the image.

You would need to use an actual img tag instead of a background image and position it absolutely within their common container.