How can I remove the CSS filter style from text?

Question

I want to remove blur from the text but keep the image in back blurred? How can I achieve that?

This is the CSS I am using:

div.feature-img.page-banner {
    -webkit-filter: blur(4px);
    filter: blur(4px);
}

Page link : http://newinternetdaily.com/2015/12/29/nasa-prepares-modern-telescope/

Is there any way to remove the CSS style from the text?

UPDATE : HTML CODE

<div class="feature-img page-banner" style="background-image: url(http://i1.wp.com/newinternetdaily.com/wp-content/uploads/2015/12/1280px-james_webb_telescope_model_at_south_by_southwest.jpg?resize=1280%2C794);">
				<h1 class="headline img-headline" style="">NASA prepares Modern Telescope</h1>
				<img width="1280" height="794" src="http://i1.wp.com/newinternetdaily.com/wp-content/uploads/2015/12/1280px-james_webb_telescope_model_at_south_by_southwest.jpg?resize=1280%2C794" class="attachment-swell-featured-large size-swell-featured-large wp-post-image" alt="1280px-james_webb_telescope_model_at_south_by_southwest.jpg" srcset="http://i1.wp.com/newinternetdaily.com/wp-content/uploads/2015/12/1280px-james_webb_telescope_model_at_south_by_southwest.jpg?resize=300%2C186 300w, http://i1.wp.com/newinternetdaily.com/wp-content/uploads/2015/12/1280px-james_webb_telescope_model_at_south_by_southwest.jpg?resize=768%2C476 768w, http://i1.wp.com/newinternetdaily.com/wp-content/uploads/2015/12/1280px-james_webb_telescope_model_at_south_by_southwest.jpg?resize=1024%2C635 1024w, http://i1.wp.com/newinternetdaily.com/wp-content/uploads/2015/12/1280px-james_webb_telescope_model_at_south_by_southwest.jpg?w=1280 1280w" sizes="(max-width: 1280px) 100vw, 1280px">			</div>

Answer 1

Try to change your code from:

div.feature-img.page-banner {
    -webkit-filter: blur(4px);
    filter: blur(4px);
}

To:

div.feature-img.page-banner > img {
    -webkit-filter: blur(4px);
    filter: blur(4px);
}

this should work: with the ">" symbol your telling your code just to affect the image.

Example: https://jsfiddle.net/soqre770/6/

div.banner > img{
  -webkit-filter: blur(4px);
  filter: blur(4px);
}

.banner p {
  position: absolute;
  left: 50px;
  top: 50px;
  color: white;
  font-size: 30px;
  font-family: verdana;
}

<div class="banner">

<img src="http://resurrection-mn.com/hp_wordpress/wp-content/uploads/2012/12/Wooden-Texture-Website-Banner.png">

<p>Test Text</p>

</div>

Answer 2

<div class="banner-container">
<div class="feature-img page-banner" style="background-image: url(http://i1.wp.com/newinternetdaily.com/wp-content/uploads/2015/12/1280px-james_webb_telescope_model_at_south_by_southwest.jpg?resize=1280%2C794);">
				<img width="1280" height="794" src="http://i1.wp.com/newinternetdaily.com/wp-content/uploads/2015/12/1280px-james_webb_telescope_model_at_south_by_southwest.jpg?resize=1280%2C794" class="attachment-swell-featured-large size-swell-featured-large wp-post-image" alt="1280px-james_webb_telescope_model_at_south_by_southwest.jpg" srcset="http://i1.wp.com/newinternetdaily.com/wp-content/uploads/2015/12/1280px-james_webb_telescope_model_at_south_by_southwest.jpg?resize=300%2C186 300w, http://i1.wp.com/newinternetdaily.com/wp-content/uploads/2015/12/1280px-james_webb_telescope_model_at_south_by_southwest.jpg?resize=768%2C476 768w, http://i1.wp.com/newinternetdaily.com/wp-content/uploads/2015/12/1280px-james_webb_telescope_model_at_south_by_southwest.jpg?resize=1024%2C635 1024w, http://i1.wp.com/newinternetdaily.com/wp-content/uploads/2015/12/1280px-james_webb_telescope_model_at_south_by_southwest.jpg?w=1280 1280w" sizes="(max-width: 1280px) 100vw, 1280px">			</div>
    </div>
<h1 class="headline img-headline" style="">NASA prepares Modern Telescope</h1>
</div>

<style>
.banner-container {
display: block;
position: relative;
}
div.feature-img.page-banner {
display: block;
-webkit-filter: blur(4px);
filter: blur(4px);
}
.img-headline {
display: block;
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
text-align: center;
line-height: 20;
color: white;
}
</style>

Answer 3

Try taking off the background image on the wrapper div and use absolute positioning:

 div.feature-img.page-banner img {
   -webkit-filter: blur(4px);
   filter: blur(4px);
   position: absolute;
 }
 .img-headline {
   position: absolute;
   color: white;
   z-index: 1;
 }

<div class="feature-img page-banner">
  <h1 class="headline img-headline" style="">NASA prepares Modern Telescope</h1>
  <img width="1280" height="794" src="http://i1.wp.com/newinternetdaily.com/wp-content/uploads/2015/12/1280px-james_webb_telescope_model_at_south_by_southwest.jpg?resize=1280%2C794" class="attachment-swell-featured-large size-swell-featured-large wp-post-image">
</div>

Answer 4

Please try this:

/* Add this class with ::before selector. */
.feature-img.page-banner::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: inherit;
    z-index: 0;
    filter: blur(4px);
}
.page-banner, .feature-img.page-banner {
    width: 100%;
    min-height: 240px;
    max-height: 640px;
    position: relative;
    margin: 0px;
    background-position: center center;
    background-size: cover;

    /* And add this 2 new lines... */
    overflow: hidden;
    text-align: left;
}

Hope this can help you.

Answer 5

Probably add img to the element selector

div.feature-img.page-banner img {
    -webkit-filter: blur(4px);
    filter: blur(4px);
}