Hallo ihr mal wieder.

ich brauche mal wieder hilfe bei Code

Ich würde gern ein Mouseover Effekt einbauen.

Der Sollte so aussehen

http://www.quinoa-shop.de/test/index.html

hab jetzt mal einiges versucht aber wiedermal ohne erfolg. Ich denke ich muss die Startseite datei bearbeiten oder ? Dort werden ja die Angebote zusammengebaut oder

Code: Alles auswählen

<?php if ($StartseitenangebotDataArray) { ?>

<section class="artikelBlockFormat">
    <h3><?php echo $n_angebote ?></h3>
    <?php foreach ($StartseitenangebotDataArray  as $StartseitenangebotData) { ?>
        <div class="verlauf artikelBlockFormat">
            <?php if ($StartseitenangebotData["imagesmall_imagestring"]) { ?>
                <div>
                    <div class="<?php echo $StartseitenangebotData['highlight_css_class']?>">
                        <?php echo $StartseitenangebotData['highlight_name'];?>
                    </div>
                    <a href="<?php echo GetArtikelLink($StartseitenangebotData["id"], $StartseitenangebotData["kategorieid"], "", "", 1, $tpl_refertype_angebote, "", $SEOURLArray); ?>"><?php echo $StartseitenangebotData["imagesmall_imagestring"] ?></a>
                </div>
            <?php } ?>
            <h2><a href="<?php echo GetArtikelLink($StartseitenangebotData["id"], $StartseitenangebotData["kategorieid"], "", "", 1, $tpl_refertype_angebote, "", $SEOURLArray); ?>"><?php echo $StartseitenangebotData["artikelname"] ?></a></h2>
            <strong><?php echo $StartseitenangebotData["preis_format"] ?></strong>
        </div>
    <?php } ?>
</section>
   
<?php } ?>


Hier der Code vom Mouseover welcher da dazwischen sollte. Eigentlich ja nicht schwer aber zuviel für mich.

Code: Alles auswählen

<div class="grid">
               <figure class="effect-zoe">
                  <img src="img/25.jpg" alt="img25"/>
                  <figcaption>
                     <h2>Creative <span>Zoe</span></h2>
                     <p class="icon-links">
                        <a href="#"><span class="icon-heart"></span></a>
                        <a href="#"><span class="icon-eye"></span></a>
                        <a href="#"><span class="icon-paper-clip"></span></a>
                     </p>
                     <p class="description">Zoe never had the patience of her sisters. She deliberately punched the bear in his face.</p>
                  </figcaption>         
               </figure>
         </div><!-- /container -->
      <script>
         // For Demo purposes only (show hover effect on mobile devices)
         [].slice.call( document.querySelectorAll('a[href="#"') ).forEach( function(el) {
            el.addEventListener( 'click', function(ev) { ev.preventDefault(); } );
         } );
      </script>


Ja, schlussendlich musst das in die vorhandene Struktur bei den Angeboten integrieren.
Am besten ist es, wenn man sich das CSS anschaut und für die Shopstruktur übernimmt, also anpasst.
Sonst wird das ein riesen Gebastel.