悬停时模糊叠加展开

Question

我想知道是否有人可以帮助我，我正在尝试在悬停时扩展模糊覆盖。我希望模糊 div 集中在带有标题的中间，然后在悬停时我希望模糊扩展并覆盖背景图像。我已经包含了我的意思的图像。

有谁知道如何使用 css3 实现此目的？

如有任何帮助，我们将不胜感激。

Answer 1

虽然有点生涩，但这对你有用：

.outerdivs
{
  background-color: #ddd;
  background-image: url('http://loremflickr.com/400/200');
  height: 200px;
  position: relative;
  width: 400px;
}

.outerdivs > h3
{
  color: rgb(255, 102, 2);
  height: 30px;
  left: 0;
  line-height: 30px;
  margin-top: -15px;
  position: absolute;
  text-align: center;
  top: 50%;
  width: 100%;
  z-index: 10;
}

.outerdivs .innerdivs
{
  background-color: #fff;
  background-image: url('http://loremflickr.com/400/200');
  background-position: center center;
  -webkit-filter: blur(2px);
  filter: blur(2px);
  height: 20%;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 50%;
  transform: translateY( -50% );
  transition: height 0.2s ease;
  width: 100%;
  z-index: 9;
}
.outerdivs .innerdivs img
{
  left: 50%;
  opacity: 0.8;
  position: absolute;
  top: 50%;
  transform: translate( -50%, -50% );
}

.outerdivs:hover .innerdivs
{
  height: 100%;
}

<div class="outerdivs">
  <h3>Title</h3>
  <div class="innerdivs">
    <img src="http://loremflickr.com/400/200" alt="" />
  </div>
</div>

悬停时模糊叠加展开

Blur Overlay expand on hover

html

css

blur

css-transitions