JSFiddle - React, Tailwind, and code Playground

by Denis

HTML

<div>
    <img src="http://demotes.ru/uploads/posts/2011-01/1296284052_0gm3kmxdelfs.jpg" alt="" />
    <a href="http://hashcode.ru/">http://hashcode.ru/</a>
</div>

CSS

img {
    max-width: 450px;
}

a {
    position: absolute;
    z-index: 5;
    font-size: 3em;
    text-align: center;
    text-shadow: 0px 0px 25px #CCCCCC, 0px 0px 5px #FFFFFF, 1px 1px 0px #EAEAEA;
    background: rgba(0,0,0,0.8);
    color: #333;
}

JavaScript

var linkOver = $('a').hide();
var myImg = $('img');

myImg.mouseenter(function(){
    linkOver.css({
        display: 'block',
        top: $(this).offset().top,
        left: $(this).offset().left,
        width: $(this).width(),
        height: $(this).height(),
        lineHeight: $(this).height() + 'px'
    });
});

linkOver.mouseleave(function(){
        $(this).effect('explode');
});