親要素にぼかし効果を適用するときに子要素を鮮明に保つにはどうすればよいですか?

<code class="html"><div class="content">
    <div class="overlay"></div>
    <div class="opacity">
        <div class="image">
            <img src="images/zwemmen.png" alt="" />
        </div>
        <div class="info">
            <!-- Information content -->
        </div>
    </div>
</div></code>

<code class="css">.content .overlay {
    background-image: url('images/zwemmen.png');
    -webkit-filter: blur(3px);
    -moz-filter: blur(3px);
    -o-filter: blur(3px);
    -ms-filter: blur(3px);
    filter: blur(3px);
    z-index: 0;
}

.opacity {
    background-color: rgba(5, 98, 127, 0.9);
    z-index: 10;
}</code>