Z-index on hover

Question

For a website I'm building I have an image with a light-grey h1 under it. When I hover over the image, the text should become black and the z-index should change so it sits above the image.

The colour change is working, z-index isn't. My h1 has position: relative added to it so that's not the issue.

$('#photo').mouseover(function() {
  $('#title').css.zIndex = "100"
  $('#title').css("color", "#000000")
});

#photo {
  z-index: 0;
  position: relative;
}

#photo:hover {
  z-index: 4;
  position: relative;
}

.titles {
  position: relative;
}

#title {
  position: relative;
}

<div class="projects">
  <h1 class="titles" id="title">Title</h1>
  <a href="#"><img src="https://graph.facebook.com/10158407872045403/picture?type=large" id="photo"></a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Alternatively I've also tries using

$('#title').css("z-index", "0")

What am I doing wrong here?

Answer 1

$('#title').css.zIndex = "100" is incorrect, but the $('#title').css("z-index", "0") you said you've tried is correct — it's just, you used 0 there instead of 100. Since both the photo and title have z-index: 0 and the photo is after the title, the photo wins.

If you use $('#title').css("z-index", "100"), it works (but keep reading):

$('#photo').mouseover(function() {
  $('#title').css("z-index", "100");
  $('#title').css("color", "#000000")
});

#photo {
  z-index: 0;
  position: relative;
  top: -4em;
}

#photo:hover {
  z-index: 4;
  position: relative;
}

.titles {
  position: relative;
  color: grey;
}

#title {
  position: relative;
}

<div class="projects">
  <h1 class="titles" id="title">Title</h1>
  <a href="#"><img src="https://graph.facebook.com/10158407872045403/picture?type=large" id="photo"></a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

(I also added top: -4em; to the photo so it did actually overlap the title.)

---

Having said that, I would try to use CSS for this instead. If we give a class to the a wrapper around img, and we put the title after that rather than before it (since you're visually making them overlap anyway), we can use either an adjacent sibling combinator (+) or a general (following) sibling combinator (~) and a :hover pseudoclass:

.photo-wrapper:hover ~ h1.titles, h1.titles:hover {
  z-index: 100;
  color: black;
}

That automatically turns the title black and moves it up the z-order if the user hovers either the photo or the title:

#photo {
  z-index: 0;
  position: relative;
}

#photo:hover {
  z-index: 4;
  position: relative;
}

.titles {
  position: relative;
  color: grey;
}

#title {
  position: relative;
  top: -4em;
}

.photo-wrapper:hover ~ h1.titles, h1.titles:hover {
  z-index: 100;
  color: black;
}

<div class="projects">
  <a href="#" class="photo-wrapper"><img src="https://graph.facebook.com/10158407872045403/picture?type=large" id="photo"></a>
  <h1 class="titles" id="title">Title</h1>
</div>

---

Having said that, I wouldn't directly manipulate the style of #title like that, I'd use CSS combined with a class we use on .projects: