[TYPO3-german] Website mit "Kacheln"

[bernd wilke]

Am 05.11.14 10:56, schrieb Frank Wendorf:
> Hi,
> vielen Dank für Eure Antworten. Ich hab jetzt auch schon etwas passendes
> gefunden
> (http://tympanus.net/Tutorials/OriginalHoverEffects/index10.html). Was
> ich aber jetzt leider noch nicht verstehe ist, wie ich das mit dem Typo3
> verknüpfen kann, so dass ic im Typo3 die entsprechende Bilder und Texte
> anlegen und pflegen kann, um sie dann das auf der Seite auszugeben.
> Vielleicht könnt Ihr mir da noch Tipps geben.
> Vielen Dank im Voraus.

da du auf der Rückseite ja text haben willst musst du zusätzlich zu der 
Dreh-Transition (zb. von der Webseite in deinem ersten Post) noch eine 
einblend transition machen, das den Text, der über/unter dem Bild liegt 
sichtbar macht.

ich würde versuchen folgendes HTML pro Bild zu erzeugen:

<div class="frame">
   <div class="img">
     <img src="..." />
   </div>
   <div class="text">
     tralala
   </div>
</div>


.frame { width:200px; height:200px; position:relative; }


.frame .img, .frame .text
{ position:absolute; left:0; top: 0; width:200px; height:200px; }

.frame .text { opacity:0; }


und bei mouseover wird .frame dann um 180° gedreht, während die 
Sichtbarkeit von .text und .img von 0 nach 1 bzw. umgekehrt geändert 
wird. (das müsstest du dir mal raussuchen/ausprobieren, das kann ich 
noch nicht auswendig)

bernd
-- 
http://www.pi-phi.de/cheatsheet.html