我想知道是否有人可以帮助我,我正试图在悬停时扩展模糊叠加。我希望模糊div在中间用标题集中,然后在悬停时我希望模糊扩展并覆盖背景图像。我已经包含了我的意思的图像。
有谁知道如何使用css3实现这一目标?
任何帮助将不胜感激。
答案 0 :(得分: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>
&#13;