How to add filter AND text to a hover event?

How to add filter AND text to a hover event?

Hi,

I'm making a sort of "splash page" for a website and need some help. I've created an event that blurs the image when the mouse hovers in and out. Now all I need is some code that will put the word "enter" over the blurred image simultaneously. I'm new to jQuery. I've tried many different things but can't get it to work. Any help would be really appreciated.

Here is the markup and script as it currently stands and at the bottom is the image blurred and unblurred.

HTML:

<div class="enterPhoto">
</div>

CSS:

.enterPhoto {
background-image:url(images/20140120_1208.JPG);
background-size:contain;
width: 2000px;
height: 1333px;
margin: 0 auto;
}

.active {background-image: url(images/20140120_1208.JPG);
-webkit-filter: blur(25px) opacity(50%);
        -moz-filter: blur(25px) opacity(50%);
        -o-filter: blur(25px) opacity(50%);
        -ms-filter: blur(25px) opacity(50%);
        filter: blur(25px) opacity(50%);
}

JS:

$(document).ready(function(){

  $(".enterPhoto").hover(
    function(){
        $(this).addClass("active");
    },
    function(){
        $(this).removeClass("active");
    }
  );
});