CSS – Blurring image with un-blurred text

I have div elements that are 200px tall and 200px wide, and I am filling each div element with an image of a person.

Upon hovering on the image, I want the image to be blurred, but I simultaneously want text to appear on the image (unblurred) that gives a description of who they are. Does anyone know how to do this?

So far, this is what I am getting:

Here is the CSS code:

.mem1 {
  height: 200px;
  width: 200px;
  margin: 0px 31px;
  display: inline-block;
  border-radius: 10px;
  border: solid;
  border-width: thin;
  border-color: #d6d6d6;
  background-image: url(members/giles.png);
}

.mem1 p {
  text-align: center;
  position: absolute;
  margin: 70px 30px;
  visibility: hidden;
}

.mem1:hover {
  -webkit-filter: blur(2px);
}

.mem1:hover p {
  text-align: center;
  position: absolute;
  margin: 70px 30px;
  color: #ffffff;
  text-shadow: 1px 1px #000000;
  -webkit-filter: blur(0px);
  visibility: visible;
}

It sounds like the text is a child of the element that you are blurring. You can't do that. You need to do something like this:

<div class="container">
    <div class="blurredPhoto"></div>
    <div class="text">Your Text</div>
</div>

.container {
    width: 200px;
    height: 200px;
    position: relative;
} 

.blurredPhoto {
    position: absolute;
    width: 200px;
    height: 200px;
}

.text {
    position: absolute;
    width: 200px;
    height: 200px;
}

Then apply your blurring logic only to the .blurredPhoto object.