Blur Overlay expand on hover - html

Question

I was wondering if someone can help me please, I am trying to expand a blur overlay on hover. I want the blur div to be centralised in the middle with a title and then on hover i would like the blur to expand out and overlay the background image. I have included an image of what I mean.
Does anyone know how to achieve this using css3?
any help would be appreciated.

Answer 1

Though a little jerky, this can work for you:
.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>