Blur Overlay expand on hover

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>