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.

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 Uhr

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

Die Ideenlounge macht Pause, daher sind aktuell keine neuen KOmmentare möglich. Folgt mir auf Facebook, dann erfahrt ihr, wann es weiter geht.

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.
  • 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)
  • Folgt der Ideenlounge auf Facebook. RSS Feed
    Ja, auch diese Webseite verwendet Cookies. Hier erfahrt ihr alles zum Datenschutz