[CSS] Fade-Effekt auf

kujulian

[COLOR=#000000][FONT=Segoe UI]Hi, ich suche eine Möglichkeit einem bestimmten Bild folgende CSS Eigenschaft zuzuschreiben:[/FONT][/COLOR][COLOR=#000000][FONT=Segoe UI]
[/FONT][/COLOR]
[COLOR=#000000][FONT=Segoe UI]Mglk1)[/FONT][/COLOR]
[COLOR=#000000][FONT=Segoe UI]Das Bild soll von Schwarz-Weiss auf Farbig wechseln beim drüber-hovern.[/FONT][/COLOR]
[COLOR=#000000][FONT=Segoe UI]
[/FONT][/COLOR]
[COLOR=#000000][FONT=Segoe UI]Mglk2)[/FONT][/COLOR]
[COLOR=#000000][FONT=Segoe UI](Warscheinlich leichter&besser:) Bild1 faded zu Bild2 über [auf diese Weise könnte ich Bild1 S/W und Bild 2 Farbig machen... was den gleichen Effekt hätte][/FONT][/COLOR]
[COLOR=#000000][FONT=Segoe UI]
[/FONT][/COLOR]
[COLOR=#000000][FONT=Segoe UI]
[/FONT][/COLOR]
[COLOR=#000000][FONT=Segoe UI]Ich habe Gestern und heute morgen alles mögliche versucht und bekomms einfach nicht hin. Ein Grund dafür ist, dass ich mir nicht sicher bin, wie ich das Bild in CSS deklariere:[/FONT][/COLOR]
[COLOR=#000000][FONT=Segoe UI]Die Image-Class nennt sich "[COLOR=#222222][FONT=Consolas]aligncenter size-full wp-image-93"

[size=8]([/SIZE][/FONT][/COLOR][size=8][COLOR=#222222][FONT=Verdana]http://subdivo.bplaced.net/wordpress/ - bei "about" das nette bild mit dem affen)[/FONT][/COLOR][/SIZE][/FONT][/COLOR]
[COLOR=#000000][FONT=Segoe UI][COLOR=#222222][FONT=Consolas]
[/FONT][/COLOR][/FONT][/COLOR]
[COLOR=#000000][FONT=Segoe UI][COLOR=#222222][FONT=Consolas]
[/FONT][/COLOR][/FONT][/COLOR]
[COLOR=#000000][FONT=Segoe UI][COLOR=#222222][FONT=Consolas]Danke für jede Hilfe[/FONT][/COLOR][/FONT][/COLOR]

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

SirEctor

Du könntest das normale Bild per CSS schwarz-weiß machen und dass dann beim Hover wieder rückgängig. Schau mal hier
http://www.css3.de/css3-filter-grayscale.html

Wie du siehst, handelt es sich aber um CSS3 und ist damit zu älteren Browsern nicht kompatibel.

Ansonsten müsstest du mit Hintergrundbildern (background-image) arbeiten und die beim Hover tauschen lassen.

kujulian

Zitat von SirEctor

Du könntest das normale Bild per CSS schwarz-weiß machen und dass dann beim Hover wieder rückgängig. Schau mal hier
http://www.css3.de/css3-filter-grayscale.html
Wie du siehst, handelt es sich aber um CSS3 und ist damit zu älteren Browsern nicht kompatibel.
Ansonsten müsstest du mit Hintergrundbildern (background-image) arbeiten und die beim Hover tauschen lassen.

okay..werde mich wohl an css3 machen..
vielen dank!

MegaWork

Den Spaß hab ich mir auch schon einmal gegönnt - das Ergebnis kannst Du hier bewundern: http://www.gesundheitszentrum-laubach.de/ (die Gebäudeansicht unten - wechselt bei hover von monochrom auf farbig)

Zur Vorbereitung habe ich ein sprite mit den beiden Ansichten erstellt. Das weitere ist HTML & CSS

Hier der HTML Code:

Code

<div class="gzl-frontansicht">   
 <a href="#">
  <span>Spalte 1</span>
 </a>
</div>

Und hier das dazugehörige Stylesheet:

Code

gzl-frontansicht {
    width:365px;
    height:173px;
    padding:5px;
    margin:2.5em 0 15px 5px;
    -webkit-box-shadow:  2px 2px 8px 0px rgba(0, 0, 0, 0.5);
    box-shadow:  2px 2px 8px 0px rgba(0, 0, 0, 0.5);
}


.gzl-frontansicht a {
    text-indent:-999em;
    width:365px;
    height:173px;
    background:#FFFFFF url(../../images/ladenfront.jpg) top left no-repeat;
    position:relative;
    display:block;
    
}
.gzl-frontansicht a span {
    display:block;
    text-indent:-999em;
    width:365px;
    height:173px;
    background:#FFFFFF url(../../images/ladenfront.jpg) bottom left no-repeat;
    position:absolute;
    top:0;
    left:0;
    opacity: 0;
    -webkit-transition:opacity 500ms ease-out;
    -moz-transition:opacity 500ms ease-out;
    -o-transition:opacity 500ms ease-out;
    transition:opacity 500ms ease-out;
}
.gzl-frontansicht a span:hover {
    opacity:1;
}

Alles anzeigen

Vielleicht hilfts Dir ja weiter!

Willkommen! Melden Sie sich an oder registrieren Sie sich.

[CSS] Fade-Effekt auf

Jetzt mitmachen!