Rollover Image

HTML

<div class="image">
    <div class="rollOver">
        <p>Rollover</p>
        <p><a href="#">link 1</a></p>
    </div>
</div>

CSS

.image { width: 100px; height: 100px; border: 1px solid green; text-align:center; position:relative; background-color:green; margin:5px; float:left; }
.rollOver { display:none; width: 100px; height: 100px; background-color: rgba(255,255,255,0.5); position:absolute; top: 0px; left: 0px; }

JavaScript

$('.image').hover(
    function() {
        $(".rollOver", this).fadeIn();
    },
    function() {
        $(".rollOver", this).fadeOut();
    }
);