iceblue-test
  Hover Effekte
 

Hover-Effekt Transparenz:


Aktuelle Chrome, - Opera, - Safari, - Mozilla + IE9 Browser sehen weichen Übergang.
Ob Du einen aktuellen Browser verwendest, kannst du hier testen .

Fahre mit der Maus über die 3 Bilder :

Flensburg

Flensburg

Flensburg


Schritt 1:

  • den Bildern geben wir eine Klasse, zum Beispiel class="transparenz"
  • auf "Eigene Seiten editieren"
  • wähle die Seite aus, wo die Bilder hinein sollen
  • nun ist die Seite zum Bearbeiten offen
  • oben links im Editor (Werkzeugleiste) auf "Quellcode" klicken
  • nun den HTML-Code für 3 Bilder einfügen :


<img class="transparenz" src="Bild-URL 1" alt="Bild">
<br>
<br>
<img class="transparenz src="Bild-URL 2" alt="Bild">
<br>
<br>
<img class="transparenz" src="Bild-URL 3" alt="Bild">


oder für verlinkte Bilder, Banner (Partnerseiten ect.) :

<a href="HIER LINK"><img class="transparenz" src="Bild-URL 1" alt="Bild" border="0"></a>
<br>
<br>
<a href="HIER LINK"><img class="transparenz" src="Bild-URL 2" alt="Bild" border="0"></a>
<br>
<br>
<a href="HIER LINK"><img class="transparenz" src="Bild-URL 3" alt="Bild" border="0"></a>
<br>
<br>


Schritt 2 :

  • die Klasse "transparenz" bekommt mit CSS gewünschtes Aussehen
  • auf "Design einstellen"
  • dort auf "Erweiterte Einstellungen"
  • weiter unten ist das Feld "Text über Design"
  • dort fügt ihr die CSS-Anweisungen ein
  • wenn ihr bereits CSS-Code eingefügt habt: Den Code vor dem --></style> mit einfügen


.transparenz {
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
  opacity: .6;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* IE8 */
  filter: alpha(opacity=60); } /*IE7 und kleiner*/ 

.transparenz:hover {
  opacity: 1.0;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
  filter: alpha(opacity=100); }

Orange = für den weichen Übergang mit Verzögerung
Hellblau = für die Transparenz


Hover: Drück-Effekt für Bilder


Fahre mit der Maus über die Bilder.

 

Dem Bild geben wir (im HTML-Code) ein class="bild"
Der HTML-Code kommt in die Seite, wo Bilder zu sehen sein sollen.
Der HTML-Code (für 3 Bilder) sieht dann so aus :

<img class="bild" src="BILD-URL 1" alt="Bild">
<img class="bild" src="BILD-URL 2" alt="Bild">
<img class="bild" src="BILD-URL 3" alt="Bild">

Ihr könnt den Code beliebig verlängern. Je nachdem, wieviele Bilder es sein sollen.

Wichtig ist:   Nach dem letzten Bild-Code einfügen :

<br style="clear:left;">

Damit sich weiterer Inhalt (z.B. Text) wieder UNTER den Bildern platzieren kann.

Und die Klasse .bild bekommt nun CSS-Anweisungen
für Ausrichtung, Breite, Abstände, Rahmen und Schatten.
Dieser Teil kommt mit ins Feld "Text über Design".
Vor dem --></style> :

/* --- Aussehen der verkleinerten Bilder --- */
.bild {
  float: left;
  width: 125px;
  padding: 10px;
  margin-right: 20px;
  margin-bottom: 20px;
  background-color: #FFFFFF;
  border: 1px solid #c9c9c9;
  -moz-box-shadow: 6px 6px 8px #2c4069;
  -webkit-box-shadow: 6px 6px 8px #2c4069;
  box-shadow: 6px 6px 8px #2c4069; }

/* --- Hover Effekt --- */
.bild:hover {
  width: 125px;
  padding: 8px;
  margin-right: 24px;
  margin-bottom: 24px; }

Bilder, die das class="bild" bekommen, werden wie oben dargestellt.
Sie werden automatisch auf 160 Pixel verkleinert, bekommen einen Rahmen und Hover-Effekt.

Das Bild könnt Ihr natürlich verlinken.
Zum Beispiel mit sich selbst. Besucher klickt Bild an, und sieht es groß.

Tipp :
Verwendet zum Verlinken den Thickbox-Effekt: Beschreibung hierDort bitte Schritt Nr.3
nicht mit ausführen !
Wichtig : Dort bitte Schritt 3 auslassen. Die CSS-Anweisung habt Ihr hier schon dabei !



Hover: Info-Fenster bei Mauskontakt öffnen


Beispiel 1: Mit der Maus auf das Wort Wetterbox
Beispiel 2: Testlink

ein Bild zum durchdrehen
Beispiel 3: Hover mit Info-TextHier kann man
kurze Info-Texte
anzeigen lassen.

Nennt sich auch Tooltip-Fenster. Die meissten Tooltips-Scripte benötigen .js Dateien.
Da wir .js Dateien im Baukasten nicht hochladen können, habe ich eine einfache Möglichkeit mit reinem CSS. Wir verwenden einfach das :hover. Siehe http://iceblue-test.de.tl/Tooltip.htmJa, hier gehts zur Tooltip-Beschreibung
Weitere Beispiele findet Ihr dort auch.

Im Tooltip können wir alles einfügen :

  • Bilder
  • Wetterbox, Uhr, Counter u.s.w.
  • Video (dann aber mit autostart)
  • oder einafch nur Info-Text







  
  TESTTESTTEST  
 
• dies ist der Inhalt im < div id="popup1" >
• befindet sich im Feld "Text UNTER Design"
• das DIV ist nur auf einer Seite zu sehen
• und auf dieser Seite wurde das Design entfernt
• angezeigt wird also nur der Inhalt des einen DIV