javascript - How to blur background image on hover but not the text -

hello started web developing , stuck @ trying blur background image of div on hover, without affecting text.

as can see have id called c1 , used javascript function display text on hover, working great.

now want use css/javascript blur background image without bluring text. possible?

my css:

#c1 {     float: left;     width: 300px;     padding: 30px;     margin: 15px;     background-image: url(images/cd.png);     background-repeat: no-repeat;     background-position: center center;     background-size: cover;     border-radius: 20px;     height: 150px; }  #c1:hover {     -webkit-filter: blur(5px); } 

my html:

<div id="productos">     <a name="jproductos"></a>     <ul>         <div id="c1">         </div>     </ul> </div> 

#c1 {  position:relative;  float: left;  width: 300px;  padding: 30px;  margin: 15px;  border-radius: 20px;  height: 150px;  overflow:hidden; }  #c1:after{  content:'';  display:block;  position:absolute;  z-index:-1;  top:0;  left:0;  bottom:0;  right:0;  background: url(images/cd.png) no-repeat center;  background-size: cover; }  #c1:hover:after{  -webkit-filter: blur(5px); }