find-templates

animierte boxen

zurück zur Übersicht

animierte Boxen mit CSS3



fahre mit der Maus über die Boxen. Grafik dreht sich, Titel und Infotext fahren hinein.
Die CSS3-Eigenschaften "transition" und "transform" machen es möglich.

Fußball
Ergebnisse
Youtube
Mein Kanal
Templates
für Iceblue + CSS
Fotos
von Flensburg


Transparenz, Drehung, Vergrößerung, Text- und Hintergrundfarbe, sowie Breite + Höhe anpassbar

Browser IE 6 - IE 8 sehen nur Hover-Effekt, ohne Drehung und Vergrößerung.





Der CSS Code


- Baukasten-Design "CSS" ? Code einfügen im Feld "css ohne style tags".
- alle anderen Designs: Einfügen im Feld "Text ÜBER Design", vor dem --></style>


/* Aussehen alle Boxen */
.themabox {
  width: 220px; 
  height: 120px; 
  float: left;
  margin: 10px; 
  background-color: #FFFFFF; 
  border: 1px solid #c9c9c9; 
  border-radius: 10px; 
  overflow: hidden;  }

.themabox a, .themabox a:hover {text-decoration: none; }

/* Grafik in Box verkleinert mit scale(.7) */
.themabox .grafik {
  position: absolute;
  width: 220px;
  height: 120px;
  opacity: 0.5;
  background-position: center;
  background-repeat: no-repeat;
  transition: all 2s linear;
  transform: scale(.7); }

/* Grafik bei Hover zoom (scale) und drehen (rotate) */
.themabox:hover .grafik {
  transform: scale(2) rotate(-20deg);
  opacity: 0.8; }

/* Eigenschaften Titel und Infotext unten */
.titel, .info_unten {
  position: absolute;
  width: 220px;
  height: 120px;
  text-align: center;
  text-transform: uppercase;
  transition: all 1s linear; }

/* Position und Aussehen Titel */
.titel {
  top: 30px; 
  font-size: 22px; 
  color: #1E5799; 
  opacity: 0; 
  filter: alpha(opacity=0); }

/* Transparenz Titel bei Hover */
.themabox:hover .titel { opacity: 1; filter: alpha(opacity=100); }

/* Position und Aussehen Infotext unten */ 
.info_unten {
  top: 120px;
  font-size: 16px;
  color: #fff;
  padding: 10px 0px;
  background-color: #202020; }

/* Position Infotext bei Hover */
.themabox:hover .info_unten { top: 75px;}


Der HTML-Code für den Seiteninhalt


- ein Beispiel für 4 animierte Boxen
- auf "Eigene Seiten editieren"
- Seite wählen, wo die Boxen hinein sollen
- nun im Editor oben links auf "Quellcode" klicken
- folgenden Code einfügen :

<div class="themabox">
<a href="/Seitentitel.htm">
<div class="grafik" style="background-image: url(Grafikadresse);"> </div>
<div class="titel">DEIN TITEL</div>
<div class="info_unten">DEIN TEXT UNTEN</div>
</a>
</div>

<div class="themabox">
<a href="/Seitentitel.htm">
<div class="grafik" style="background-image: url(Grafikadresse);"> </div>
<div class="titel">DEIN TITEL</div>
<div class="info_unten">DEIN TEXT UNTEN</div>
</a>
</div>

<div class="themabox">
<a href="/Seitentitel.htm">
<div class="grafik" style="background-image: url(Grafikadresse);"> </div>
<div class="titel">DEIN TITEL</div>
<div class="info_unten">DEIN TEXT UNTEN</div>
</a>
</div>

<div class="themabox">
<a href="/Seitentitel.htm">
<div class="grafik" style="background-image: url(Grafikadresse);"> </div>
<div class="titel">DEIN TITEL</div>
<div class="info_unten">DEIN TEXT UNTEN</div>
</a>
</div>

<br style="clear: left; />


- ersetze /Seitentitel.htm mit der Seiten-URL, auf die verlinkt werden soll
- ersetze Grafikadresse durch die Adresse deiner Grafik
- zum Beispiel https://img.webme.com/pic/../name/bildname.jpg
- füge gewünschte Texte bei Titel und Infotext ein

- Fragen zum Tutorial ? Benutze das Kontaktformular
- aber gültige Emailadresse NICHT vergessen. Sonst können wir NICHT antworten



Heute: 2 Besucher