How to blur a div and display a text over it

Question

How can I blur a div element on hover and display a text over it.

I did till the blurring part but I can't figure out how to display a text over it. I've searched for this problem but got solutions only for images.My div contains <h5> tag not <img> tag

.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 code

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

And my question is not duplicate of CSS blur on background image but not on content. I want to blur my contents that contains texts and display another text over it

@DaniP Please read the content before marking it a a duplicate.My question was not that.Might be a duplicate but not for that question. — ani, Apr 10 '17 at 20:50

score 0 · Answer 1 · answered Apr 10 '17 at 20:38

Put the div and text in a common parent, add position: relative to the parent, and absolutely position the text over the 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>

My div contains h5 tag.I want to blur it and display another text over it on hover — ani, Apr 10 '17 at 20:47

How to blur a div and display a text over it

1 Answers1