z-index issue when placing text over images - html

Question

I'll provide CSS and HTML sources first.
jsFiddle
The live example is here
The problem is, h2 texts are not visible unless I do z-index: -1; on images. It makes the text appear, however, then the image is being lost and I look at body background.
There is not something touching z-index values except the fixed navigation bar at top.
What may be causing this, can you have a look?
Ps. Writing z-index: 2; on H2 tags doesn't work either.

Answer 1

If you want z-index:2 on <h2> works, you should add position:relative; or position:absolute; or position:fixed.
You can see z-index

Answer 2

i change your HTML & CSS
change in HTML: Move img into a tag
<div class="spotlight-area">
<div class="spotlight">
<div class="spotlight-item width-2 height-2">
<a href="#" class="spotlight-info">
<h2 class="large">
Random text
</h2>
<img src="http://www.sobafire.com/__v2/themes/default/images/news/spotlight-big.jpg" alt="haber">
</a>
</div>
<div class="spotlight-item width-1 height-1">
<a href="#" class="spotlight-info">
<h2>
Random Text
</h2>
</a>
<img src="http://i.imgur.com/TAxDMus.jpg" alt="haber">
</div>
<div class="spotlight-item width-1 height-1">
<a href="#" class="spotlight-info">
<h2>
Random Text
</h2>
<img src="http://i.imgur.com/TAxDMus.jpg" alt="haber">
</a>
</div>
<div class="spotlight-item width-1 height-1">
<a href="#" class="spotlight-info">
<h2>
Random Text
</h2>
<img src="http://i.imgur.com/TAxDMus.jpg" alt="haber">
</a>
</div>
<div class="spotlight-item width-1 height-1">
<a href="#" class="spotlight-info">
<h2>
Random Text
</h2>
<img src="http://i.imgur.com/TAxDMus.jpg" alt="haber">
</a>
</div>
<div class="spotlight-item width-1 height-1">
<a href="#" class="spotlight-info">
<h2>
Random Text
</h2>
<img src="http://i.imgur.com/TAxDMus.jpg" alt="haber">
</a>
</div>
</div>
</div>
css:
change On CSS: Remove position: absolute; From img and ADD It TO .spotlight-area .spotlight .spotlight-item:hover .spotlight-info h2 Remove padding From .spotlight-area .spotlight-info { and Add Margin to .spotlight-area .spotlight .spotlight-item:hover .spotlight-info h2 with similar value
.spotlight-area {
width: 790px;
margin: 0px auto;
padding: 0px;
}
.spotlight-area img, .spotlight-area embed {
max-width: 100%;
height: auto;
min-height: 50px;
}
.spotlight-area .spotlight {
display: block;
border-top: 1px solid #3b3b3b;
border-left: 1px solid #3b3b3b;
float: left;
margin-bottom: 4px;
}
.spotlight-area .spotlight .width-1 { width: 262px }
.spotlight-area .spotlight .width-2 { width: 525px }
.spotlight-area .spotlight .height-1 { height: 174px }
.spotlight-area .spotlight .height-2 { height: 349px }
.spotlight-area .spotlight .spotlight-item {
float: left;
position: relative;
border-bottom: 1px solid #3b3b3b;
border-right: 1px solid #3b3b3b;
overflow: hidden;
}
.spotlight-area .spotlight .spotlight-item:hover .spotlight-info h2 {
color: #ffc203;
}
.spotlight-area .spotlight .spotlight-item img {
width: 100%;
height: 100%;
top: 0;
left: 0;
margin: 0;
border: 0;
z-index: -1; /* tricky part */
}
.spotlight-area .spotlight-info {
display: block;
height: 100%;
min-height: 50px;
}
.spotlight-area .spotlight-info a {
display: block;
height: 100%;
min-height: 50px;
padding: 20px;
}
.spotlight-area .spotlight .spotlight-item .spotlight-info h2 {
display: inline-block;
max-width: 480px;
font-size: 30px;
line-height: 32px;
color: #f0f0f0;
position: absolute;
margin:20px;
}
in My Test This Change work