Mouseover für Bild und Link

Hallo,

ich habe da mal ne Frage:

Ich habe einen Mousovereffekt in meine Seite eingebaut.
Sprich, wenn man mit der Maus über das Bild streicht, ändert es sich in ein anderes.
Diese Bilder habe ich mit verschiedenen Seiten verlinkt.
Unter den Bildern steht dann nochmal wo es hinführt.
Hänge einen Screenshot an auf dem man es erkennt.

Leider habe ich es nicht hinbekommen, die Unterschrift direkt zu dem Bild zu bekommen, also habe ich für jede eine neue Box definiert (heißt das so) und in diese dann den Text geschrieben.

Nun fände ich es toll, wenn der Mouseovereffekt (wechseln der Bilder) auch stattfindet wenn man über die Schrift/Link fährt.
Anbei mal der Code, mit dem ich den mouseovereffekt gemacht habe, bzw. das html, wie ich die Boxen definiert habe.

Wenn mir ansonsten jemand sagen könnte, wie ich die Bildunterschriften direkt mit in die 'Bildbox' bekomme, wäre ich auch mit dieser Lösung glücklich.
Wie gesagt, die neuen Boxen sind für mich nur ne 'Notlösung' gewesen.

Vielen Dank schonmal

Simone

Code:

.GHBild {
position:relative;
}
.GHBild img {
position:absolute;
top:0;
left:0;
-webkit-transition: opacity 0.7s ease;
transition: opacity 0.7s ease;
height: auto;
    width: 70%;
}
.GHBild:hover .bild1 {
opacity:0;
}

.ShopBild {
position:relative;
}
.ShopBild img {
position:absolute;
top:0;
left:0;
-webkit-transition: opacity 0.7s ease;
transition: opacity 0.7s ease;
height: auto;
    width: 70%;
}
.ShopBild:hover .bild1 {
opacity:0;
}
.MandalaBild {
position:relative;
}
.MandalaBild img {
position:absolute;
top:0;
left:0;
-webkit-transition: opacity 0.7s ease;
transition: opacity 0.7s ease;
height: auto;
    width: 70%;
}
.MandalaBild:hover .bild1 {
opacity:0;
}
.GHBild, .ShopBild, .MandalaBild {
  float: left;
  margin-bottom: 5%;
  background-color: rgb(255, 255, 255, 0.6);
    box-shadow: 10px 10px 30px grey;
  width: 33.333%;
  left: 5.5%;
  }
.GHLink {
    float: left;
    padding: 20px;
    width: 33.333%;
}
.ShopLink {
    float: left;
    padding: 20px;
    width: 33.333%;
}
.MandalaLink {
    float: left;
    padding: 20px;
    width: 33.333%;
}

HTML:

<div style="color: rgb(102, 102, 102);  text-align: center; padding: 15px 0px 0px;">Und sonst noch...<br />
3 Bilder verlinkt zu Seiten Shop, Laden, Gro&szlig;handel
<div style="margin-bottom: 50px; border-radius: 2px; text-align: center; padding: 15px 0px 15%; ">
<div class="GHBild"><a href="http://www.mantraroma-shop.de/Testshop2/index.php?cat=c254_Shop-shop.html"><img alt="" class="bild2" src="images/EigeneBilder/GHBild2.JPG" /></a> <a href="http://www.mantraroma-shop.de/Testshop2/index.php?cat=c254_Shop-shop.html"><img alt="" class="bild1" id="1" longdesc="2" src="images/EigeneBilder/GHBild1.JPG" title="3" /></a></div>

<div class="ShopBild"><a href="http://www.mantraroma-shop.de/Testshop2/index.php?cat=c254_Shop-shop.html"><img alt="" class="bild2" src="images/EigeneBilder/Shopinnen.JPG" /></a> <a href="http://www.mantraroma-shop.de/Testshop2/index.php?cat=c254_Shop-shop.html"><img alt="" class="bild1" src="images/EigeneBilder/ShopBild1.JPG" /></a></div>

<div class="MandalaBild"><a href="http://www.mantraroma-shop.de/Testshop2/shop_content.php?coID=200"><img alt="" class="bild2" src="images/EigeneBilder/Mandala1.JPG" /></a> <a href="http://www.mantraroma-shop.de/Testshop2/shop_content.php?coID=200"><img alt="" class="bild1" src="images/EigeneBilder/Mandala.JPG" /></a></div>
</div>

<div class="GHLink"><a href="http://www.mantraroma-shop.de/Testshop2/shop_content.php?coID=201">Gro&szlig;handel</a></div>

<div class="ShopLink"><a href="http://www.mantraroma-shop.de/Testshop2/index.php?cat=c254_Shop-shop.html">Online Shop</a></div>

<div class="MandalaLink"><a href="http://www.mantraroma-shop.de/Testshop2/shop_content.php?coID=200">Mandala Kleve</a></div>
</div>