divをぼかしてその上にテキストを表示する方法

Question

吹き出しのdiv要素をぼかして、その上にテキストを表示するにはどうすればよいですか？

私はぼかし部分まで行いましたが、上にテキストを表示する方法を理解できません。 私はこの問題のために、検索だけimages.My divのためのソリューションを持っているが<h5>タグません<img>タグ

.content34 { 
    height: 1em; 
    text-align: center; 
    width: 320px; 
    margin-top:25px; 
    margin-left: -55px; 
    position: inherit; 
    overflow: hidden; 
    cursor: pointer; 
} 
.txt{ 
    -webkit-transition: .4s ease-in-out opacity; 
    -moz-transition: .4s ease-in-out opacity; 
    -o-transition: .4s ease-in-out opacity; 
    transition: .4s ease-in-out opacity; 
} 
.txt :hover{ 
    opacity: 0.1; 
} 

HTMLコード

<div style=" float: left;" class="txt"> 
    <h5 class='content34' style="float: left"> Lorem ipsum dolor sit amet, 
    consectetur adipiscing elit. Ut euismod, nulla a aliquet ultrices, 
    mauris turpis fermentum quam, vel varius dolor enim vitae lacus. Morbi 
    ac posuere orci. Aliquam erat volutpat. Pellentesque consequat dignissim 
    metus in accumsan. Maecenas sem augue, placerat commodo convallis non, 
     commodo vel elit. Vestibulum porttitor tortor molestie ligula varius 
    sed cursus arcu suscipit. Maecenas imperdiet laoreet suscipit. Donec 
    blandit est eget augue hendrerit venenatis. Nunc nibh ipsum, convallis 
    mattis iaculis at, luctus ac risus. Morbi commodo sollicitudin ipsum, 
    quis aliquam quam vestibulum at. 
    </h5> 
    <h4 style=" display: none">See 
    Message 
    </h4> 
</div> 

そして、私の質問CSS blur on background image but not on contentの複製されていませんが含まれています。 テキストを含むコンテンツをぼかして、別のテキストを表示したい

Answer 1

divとテキストを共通の親に入れ、親にposition: relativeを追加し、絶対にdivの上にテキストを配置します。

article { 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 
div { 
 
    width: 560px; 
 
    height: 400px; 
 
    background: url('http://kenwheeler.github.io/slick/img/fonz1.png'); 
 
    filter: blur(5px); 
 
} 
 
h1 { 
 
    position: absolute; 
 
    top: 50%; left: 50%; 
 
    transform: translate(-50%,-50%); 
 
}

<article> 
 
    <div></div> 
 
    <h1>hello world</h1> 
 
</article>