动态更改字体颜色和URL

I am working on website (HTML+PHP).Here is Fiddle of what I have done so far(sharing one for example).

Each image should point to different URLs. There are few images whose color matches the font color.I want to change font size/color as image changes. Also URL should also change automatically as image changes.

HTML:

<div class="grid">
    <figure class="effect-lexi effect-chocolate">
        <div id="cf3" class="shadow">
            <img src="http://tympanus.net/Development/HoverEffectIdeas/img/22.jpg" alt="Image" class="bottom" />
            <img src="http://tympanus.net/Development/HoverEffectIdeas/img/21.jpg" alt="Image" class="top" />
        </div>
        <figcaption>
                <h2>Dark <span>Chocolate Smoothie</span></h2>

            <p>Description</p>  <a href="#">View more</a>

        </figcaption>
    </figure>
</div>

Is it possible ? Can anyone help me with it.?

Thanks,

Probably the simplest solution is to set the font color as an rgba. For example color:rgba(0,0,0,.5);

As long as the images aren't black, this will adapt nicely to the color of the background. If you don't have any info from the back end, something along these lines is will probably be the way to go.

Using CSS3, you might be able to wield the blend mode to accomplish this.

https://css-tricks.com/basics-css-blend-modes/

Also, you would need to use the JavaScript History to change the URL.

https://developer.mozilla.org/en-US/docs/Web/API/History