-2

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

halfer
  • 19,824
  • 17
  • 99
  • 186
Sam Cubit
  • 1
  • 1
  • Welcome to Stack Overflow! Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). – Paulie_D Mar 31 '16 at 15:23
  • @Paulie_D jeez paulie you're everywhere... –  Apr 09 '16 at 09:50
  • when you don't read the terms and conditions of asking questions... [How to Ask...](http://stackoverflow.com/help/how-to-ask) –  Apr 09 '16 at 09:50

1 Answers1

0

Give each element a z-index value: elements with higher z-index appear 'in front of' elements with a lower z-index.

So :

blur{
  z-index:0;
}
img,inner-container{
  z-index:2;
}

Not sure, but if you want outer-container 'behind' give it a z-index of -2.

Arif Burhan
  • 507
  • 4
  • 12
  • That will only work if you also use `position:relative;` (or `absolute`, or `fixed`, etc), however, that should be fine as that does nothing if you don't set `top` or co (and the others all imply you knew what you were doing with it already). – abluejelly Mar 31 '16 at 17:15