CSS Advanced Positioning; Need Help Please : I am creating a website and am working on a hover animation for css. 
    <html> 
    ...
    <body>
    <div id ="outer_container">
        <div id="inner_container">
            <img id="imageOne"/>
        </div>
    </div>
    ...

</body>
<html>

** outer_container takes up the width of the page **

inner_container is a child of outer_container and is aligned in the center of it vertically.

The css animation displays a hidden element named 'blur' which is basically a background color block that takes up the width and height of the image. On hover "blur" appears on top of the <img/> tag inside of the inner_container div.

Unfortunately the block element "blur" is placed over the top of the the image tag using "position : relative / position : absolute" causing it to interfere with the display : inline-block used to align the inner_container div with the outer_container div.

I'm looking for a solution that would allow the hidden element to be displayed on top of the <img/> tag in the inner_container div without using position : relative / position : absolute so that I can still align the inner_container div inside of the outer_container div.

The actual page code can be found here : 
http://jsbin.com/zawiqarijo/1/edit?html,css,output


Thank you for your help ahead of time!
