Question

如何在悬停时模糊div元素并在其上显示文字。

我做了直到模糊的部分，但我无法弄清楚如何在它上面显示文字。我已经搜索过这个问题，但只为图片提供了解决方案。我的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和text放在一个共同的父级中，将position: relative添加到父级，并将文本绝对放在div上。

＆＃13;

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%);
}

＆＃13;

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

＆＃13;

如何模糊div并在其上显示文本

1 个答案: