Using compound css selectors to toggle a class of an image

Using compound css selectors to toggle a class of an image

I'm creating a hover effect like this. I have a 6 columns of images. There are 2 images per column stacked on top of each other. Like so:


X      X      X      X      X      X
X      X      X      X      X      X


The top row of X's I want to start out as invisible. When you hover over the bottom row of images, the top row fade's in (by toggling the css code opacity from 0 to 100), and then when you mouseover, it fades back out to 0.


I'm having trouble setting this up. Here's my HTML:


  2. <div class="carbox" id="box1"><img src="img/impreza2.jpg" class="imgtophidden"/><img src="img/impreza.jpg" class="imgbot" /></div>
  3. <div class="carbox" id="box2"><img src="img/wrx.jpg" class="imgtophidden"/><img src="img/wrx.jpg" class="imgbot" /></div>
  4. <div class="carbox" id="box3"><img src="img/legacy2.jpg" class="imgtophidden"/><img src="img/legacy.jpg" class="imgbot" /></div>
  5. <div class="carbox" id="box4"><img src="img/outback2.jpg" class="imgtophidden"/><img src="img/outback.jpg" class="imgbot" /></div>
  6. <div class="carbox" id="box5"><img src="img/forester2.jpg" class="imgtophidden"/><img src="img/forester.jpg" class="imgbot" /></div>
  7. <div class="carbox" id="box6"><img src="img/tribeca2.jpg" class="imgtophidden"/><img src="img/tribeca.jpg" class="imgbot" /></div>
Okay, the css


  2. .imgtop {
  3. opacity: 100;
  4. }
  5. .imgtophidden {
  6. opacity: 0;
  7. }
This way, I can use toggleClass to change the opacity.

Could some help me form the jquery for this? I can't seem to think of how to write this. I'm having trouble getting the mouseover to even be selected. How do I do that for JUST the lower image within a specific div?

Here's the silly jquery I have tried:

Would appreciate help.

  2. $(function() {
  3. $('#box1 img').hover(function() {
  4. $('#box1 .imgtophidden').addClass('imgtop')
  5. });
  6. });