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.
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.
<?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(); ?>
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
wow, das ist so genial … ich bastle grad bei mir damit rum … das geht ja wirklich easy-peasy! Danke für den Tipp!