CSS – Blurring image with un-blurred text - css

Question

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;
}

Answer 1

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.

Answer 2

Here is a code snippet that does what you are looking for - blurring an image when you mouse over it, while simultaneously showing a textual description.
The key is that you need to use the :hover pseudoclass on the div, then when the div is hovered, you blur the image only, and show the description text span.
.blur {
width: 350px;
height: 350px;
}
.blur img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.blur span {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.blur:hover img {
-webkit-filter: blur(5px);
}
.blur span {
opacity: 0;
position: absolute;
top: 30px;
left: 30px;
}
.blur:hover span {
opacity: 1;
}
<div class="blur pic">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97350&w=350&h=350">
<span>This is a photo of something.</span>
</div>

Answer 3

As #DA explained you need to get a parent container involved. Here's a working fiddle using your example code: https://jsfiddle.net/m25gkqkL/1/
<div class="parent">
<div class="mem1"></div>
<p>Hello World!</p>
</div>
.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);
z-index: 1;/* added */
position: relative;/* added */
}
.parent {/* added this */
position: relative;
height: 200px;
width: 262px;
}
.parent p {/* modified */
text-align: center;
position: absolute;
visibility: hidden;
top: 50%;/* modified */
margin-top: -0.5em;/* added */
width: 262px;/* added */
z-index: 2;/* added */
}
.parent:hover .mem1 {/* modified */
-webkit-filter: blur(2px);
}
.parent:hover p {/* modified */
color: #ffffff;
text-shadow: 1px 1px #000000;
-webkit-filter: blur(0px);
visibility: visible;
}

Answer 4

.parent{
position: relative;
}
.text-child{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
transition: all .3s ease;
z-index: 1;
}
.text-child h1{
color: black;
text-decoration: none;
font-size: 40px;
}
.parent:hover img{
filter: blur(4px);
}
.parent:hover .text-child{
opacity: 1;
}
<div class="parent">
<div class="text-child">
<h1> hi this is text.<h1>
</div>
<img src="/images/excel.png" alt="">
</div>