Iceblue-CSS

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

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 :

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

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

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:
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
Beispiel 2:
Beispiel 3: Hover mit

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

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

Seite geschlossen.

Hover Effekte

Hover-Effekt Transparenz:

Hover: Drück-Effekt für Bilder

Hover: Info-Fenster bei Mauskontakt öffnen