Crazy Hover-Effekte fĂŒr Bilder mit Caption und Auszugstext

header

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.

mockup_kno

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:

    hoverDrĂŒ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

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

Das könnte dich auch interessieren:






  • About

    aboutHallo, ich heiße Mirjam Schrepler und setze als freiberufliche Grafikerin mit einem wunderbaren Netzwerk Internetseiten und ganzheitliche Marketingprojekte um.

    Auf der Ideenlounge blogge ich ĂŒber die vielen kleinen Dinge, mit denen ihr euren Blog optisch aufhĂŒbschen könnt.

    Ich liebe Wordpress und schlanken Quellcode - und es ist erstaunlich, wie einfach und schnell man viele Plugins durch ein kleines bisschen Quellcode ersetzen kann.

    Tragt euch einfach in den Ideenlounge Style-Club-Newsletter ein, und ihr erhaltet die besten Tipps regelmĂ€ĂŸig per Mail.

  • Tolle Insider-Tipps zum Stylen deines Wordpress Content!

    Trage dich einfach in unseren Mailverteiler ein und erhalte das Plugin WGIN-Styles mit dem nÀchsten Newsletter for free

  • Die 1 Cent pro Klick Formel
  • News von Facebook

  • Basics (3)
    Wie binde ich ein eigenes CSS ein und wie funktioniert das mit dem Childtheme.
  • Code-Schnipsel zum Copy&Paste (14)
    NĂŒtzliche CSS-, PHP-, und Javascript-Code-Snippets zum direkten Einbau in euer WP-Theme.
  • Freebies (4)
    Kostenlose Downloads - Icons, Grafiken, HintergrĂŒnde, Plugins und vieles mehr.
  • Lesenswertes (1)
    Immer wieder stoße ich auf interessante Blogs, Webseiten oder BĂŒcher - analog und digital - hier meine Favoriten.
  • Blogvorstellungen (1)
    Blogs, deren Design mich einfach umhaut....
  • Ressourcen (1)
    NĂŒtzliche Online-Tools, Bildarchive und Code-Generatoren die euch als Blogger den Bloggeralltag erleichtern.
  • Reste-Ecke (7)
    Alles, was nicht wo wirklich in einer der anderen Kategorien passt.
  • Specials (1)
  • Blogverzeichnis - Bloggerei.de
  • FuZo-News per Mail abonnieren Folgt der Ideenlounge auf Facebook. RSS Feed