2 Image Mouse Hover Effects won't work

Question

I'm currently working for fun on an Filter based Gallery Page with MixItUp, where every Image has an external Link which should always be clickable unless hover over the Second Effect, where the new Link comes in. Anyhow in addition if the Image is hover by the Mouse Pointer it should have 2 Effects. The First is a Text at the Bottom with an transparent background, which works fine.

The second one is another Image 30x30, but with a little Text( If not possible I will make the Text on the Image) and a different Link, so you will see and can only click it on Mouse Hover the overlay Image.

This is currently my Code where the Text on Image works ;

http://jsfiddle.net/zzfethtw/

<ul class="img-list">

<li class="filter1 filter2 filter3"><a href="#" rel="nofollow"  target="_blank">
<img src="#" alt="#" data-qazy="true"><span class="text-content"><span>Test Text</span>
</span></li></a>

But since I can't figure out any Solution I hoped someone here might be able to help me.

Cheers,

Julian