Echo PHP string value as caption on hover?

Question

Echo a PHP string value(s) as caption on hover?

Website structure:

• 1x landing-page (index, selection work)
• 1x Work-page (overview all work)
• ?x Project-page(s)

I have navigation build where project-title is part of the header/navigation. String values on the project-page are echoed for the nav-info ($title + $category) when on a project-page.

The primary navigation nav-primary(Work + Information) will be replaced by the nav-info and could be reached again by hovering the header. That all works fine, but i was wondering if it is possible to do the same thing for showing the caption as echo string on hover.

Landing-page and work-page have thumbnails with hover actions for showing the captions. My thinking was if i use echo string as figcaption than when hovering it will show up as nav-info and return to nav-primary when not hovering, my idea was building it like this:

<div class="grid-12-span">
    <a href="/work/project-x">
        <img
        src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1.414'%3E%3C/svg%3E"
        data-src="/images/project-x-01.jpg" 
        class="lazyload"
        alt="">
        <figcaption><?php $title = "Project X"; $category = "Spatial"; ?></figcaption>
    </a>
</div>

Header/navigation:

<header>
    <nav>
    <ul class="nav-primary">
        <li><a href="/work">Work</a></li>
        <li><a href="/information">Information</a></li>
    </ul>
    <ul class="nav-info">
        <li class="title"><?php echo $title; ?></li>
        <li class="category"><?php echo $category; ?></li>
    </ul>
    </nav>
</header>

CSS:

a:hover figcaption {
    opacity: 1;
    -webkit-transition: opacity 0.2s;
    transition: opacity 0.2s;
}

figcaption {
    opacity: 0;
    font-size: inherit;
    position: relative;
    float: left;
    top: 0;
    left: 0;
    text-align: left;
    padding: 3px 0 0;
    width: 100%;
}