Hi Forum,
auf meiner Testpage befinden sich unter Home bis jetzt nur im oberen Bereich flipping images, die ich laut dieser Anleitung gebaut habe. Sie funktionieren bis jetzt nur mit Chrome, aber im laufe des Tages mache ich evtl. noch die Firefox-Kompatibilität.
In Chrome bzw. Chromium (d. h. in Safari müsste es eigentlich auch funktionieren) ist es bis jetzt so, dass die Vorderseite mit Bild angezeigt wird, was auch richtig ist, aber zusätzlich wird noch der Titel angezeigt, der eigentlich erst auf der Rückseite erscheinen soll. Auf der Rückseite wird der Titel und das Bild einfach nur umgekehr, es soll aber nur der Titel auf dem Hintergrund (welcher ein Schwarz mit rauschen ist) nicht seitenverkehrt angezeigt werden.
Die entsprechenden Code-Fragmente füge ich hier bei:
Das Template home.php (in Auszügen:
<?php query_posts('post_type=projekte&showposts=8'); ?>
<div class="project-wrapper">
<h2>Neueste Projekte</h2>
<ul class="home-box">
<?php while (have_posts()) : the_post(); ?>
<li class="home-thumbnail">
<div id="card-container">
<div id="card">
<div class="back"><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(array(200, 200), array('class' => 'recent-thumbs')); ?></a></div>
<div class="front"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div>
</div>
</div>
</li>
<?php endwhile; ?>
</ul>
<a href="http://dev.npire.de/projekte/" class="allItems alignright">Alle Projekte</a>
<div class="clearfix"></div>
</div>style.css
#card {
-webkit-transform-style: preserve-3d;
-webkit-perspective: 1000;
width: 200px;
height: 149px;
position: relative;
}
.back, .front {
position: absolute;
-webkit-backface-visibility: hidden;
-webkit-transition: -webkit-transform 1s ease-in;
width: 100%;
height: 100%;
padding: 0px;
color: #fff;
font-weight: bold;
box-shadow: inset 0px 0px 20px rgba(0,0,0,0.4);
border-radius: 4px;
}
.back {
-webkit-transform: rotateY(180deg);
overflow: hidden;
}
.front {
}
#card-container {
display: inline-block;
text-align: justify;
}
#card-container:hover .back {
-webkit-transform: rotateY(0deg);
}
#card-container:hover .front {
-webkit-transform: rotateY(-180deg);
}Vielleicht kann mir ja jemand den Kniff veraten, wie ich auf der Vorderseite das Bild und auf der Rückseite den entsprechenden Titel bauen kann.
Für jedwede Art von Hilfe wäre ich dankbar.
Gruß
Karsten