html5 - Blur Overlay expand on hover -

i wondering if can me please, trying expand blur overlay on hover. want blur div centralised in middle title , on hover blur expand out , overlay background image. have included image of mean.

does know how achieve using css3?

any appreciated.

though little jerky, can work 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>