Text Pops Up Cursor Over Image

How do I create the effect where white color text pops up when I hover cursor over a black & white image. And at the same time the image is slightly blurred. (Example Buck Mason site)

 

Could you explain it a little bit more? I don't understand and i can't see the effect in that website

 

I think the OP is talking about this ---> https://jsfiddle.net/KyleMit/g74Ep/

What your asking for can be done with JavaScript

 

I did not put up that link. Just google "buck mason". It is a garment site.

 

Yes! You can do with in css with a div that goes over all the elements of the page. In order to achieve this, you need to use a <div> with z-index higher than all the other elements in the DOM document. You want to try absolute positioning. If you're going to do this when the use goes over a div, you could try something like this using Jquery to detect the hover action:

<script type="text/javascript">
$('#content').hover(function () {
$(#overlay').css('display', '');
});
</script>

<div id="content" style="height: 100%; width: 100%;">Main content here</div>
<div id="overlay" style="display: none;z-index: 10; width: 100%; height: 100%;">This is the overlayed content</div>

Code (markup):

If you don't get it, you can read something here: http://stackoverflow.com/questions/2941189/how-to-overlay-one-div-over-another-div

 

Thank you so much for your assistance.

 

Glad it helped!

 

Not quite true. The z-index need only be greater than sibling, positioned elements.

cheers,

gary