Crazy Hover-Effekte für Bilder mit Caption und Auszugstext

Hier bin ich mal über eine wirklich gigantische Sammlung an Hovereffekten gestolpert, die das Herz jeden Designers höher schlagen lässt. Und hier kommt für euch der Link zu dieser fantastischen Sammlung – erstellt von IAROUSE:

http://gudh.github.io/ihover/dist/index.html

Es gibt dort Effekte für Bilder im Kreis, im Quadrat – mit Sliding Captions, mit Animationen bei denen das Bild zur Seite klappt oder mit stylischen Zoom-Effekten – kurz gesagt: Hier gibt es wirklich alle erdenklichen Varianten an Animationen, die man mit einem Bild, einem Farb-Layer und einem Text kombinieren kann.

Und das alles komplett mit reinem CSS! Ich habe das Ganze gleich mal auf meinem Kochblog für Koch-DAUs  umgesetzt.

Und zwar habe ich hier aus dem Code von IAROUSE einen WordPress-Loop gebastelt, der mir automatisch alle Beiträge einer Kategorie mit diesem schicken Hovereffekt anzeigt.

Und so bekommt ihr diesen Effekt auf eure Seite:

1. Effekt aussuchen
   Das ist bei der Masse an Effekten nicht einfach – ihr müsst euch zunächst entscheiden, ob ihr ein kreisförmiges  oder ein eckiges Bild verwenden möchtet.
   Dann braucht ihr noch die Effektnummer – es gibt 20 Effekte für kreisförmige und 15 Effekte für eckige Bilder.
2. CSS einbinden
   Die CSS sind ziemlich mächtig – deshalb empfehle ich, nur die wirklich wichtigen Stellen zu übernehmen.Hier könnt ihr euch die CSS ansehen:
   https://github.com/gudh/ihover/blob/gh-pages/dist/styles/main.cssFür die eckigen Bilder in meinem Kochblog brauchte ich als Basis nur die Zeilen 2521-2537 und für den Effekt Nummer 13 die Zeilen 6464-6581.
   Diese paar Zeilen CSS reichen schon völlig aus – und es verkürzt die Ladezeit, wenn nicht ein CSS mit fast 7000 Zeilen geladen werden muss.

   Kleiner Trick: So findet ihr schnell die passenden CSS:

   Drückt STRG+F zum Suchen und sucht nach .ih-item.square oder .ih-item.circle
   Kopiert euch die ersten Treffer in eure CSS Datei.
   Danach sucht ihr gezielt nach eurem Effekt – in meinem Beispiel .square.effect13
   So findet ihr schnell die passenden Stellen.

3. Einbau im Template
   Hier ein Beispiel aus meinem Template – ich habe das ganze in eine Schleife gelegt, die mir alle Beiträge einer Kategorie ausliest:

   <?php remove_all_filters('posts_orderby');
   $recent = new WP_Query("cat=21&showposts=1000&post_status=publish&orderby=date&order=DESC"); while($recent->have_posts()) : $recent->the_post();?>
   <!--------------------Beginn der Schleife -----------------> 
   
   <div class="row">
    <div class="col-sm-6">
    <div class="ih-item square effect13 left_to_right">
    <a href="<?php the_permalink() ?>">
    <div class="img"><?php the_post_thumbnail('thumbnail', array('class' => 'wpg_imagebild')); ?></div>
    <div class="info">
    <h3><?php the_title(); ?></h3>
    <?php the_excerpt(); ?>
    </div>
    </a>
    </div> 
    </div>
   </div>
   
   <!-------------------- Ende der Schleife-------------------->
   <?php endwhile; wp_reset_postdata(); ?>

   Hier die Legende dazu:
   Die roten Zahlen  müsst ihr an eure Wünsche anpassen (ID der Kategorie und Anzahl der Posts.)
   Der Blaue Text ist ein Block aus dem Quellcode von IAROUSE – hier habe ich die Template Tags für den Titel, den Auszug und dem Beitragsbild eines WordPress-Posts hinzugefügt.

Und schon habt ihr einen wunderbaren Hover Effekt für einen Überblick über eure Posts!

Ãœbrigens: Die Abfrage, welche Posts in welcher Form angezeigt werden könnt ihr auch auch mit meinem easy wp query generator generieren – schaut einfach mal vorbei.

x

Kommentare

1. Birgit 1. Juli 2015 um 16:37 Uhr

   wow, das ist so genial … ich bastle grad bei mir damit rum … das geht ja wirklich easy-peasy! Danke für den Tipp!

   Antworten

Das könnte dich auch interessieren: