mediengestalter.info
Datenschutzerklärung
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter
Aktuelles Datum und Uhrzeit: Do 25.04.2024 04:00 Benutzername: Passwort: Auto-Login

Thema: CSS3 image hover vom 08.08.2012


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> CSS3 image hover
Autor Nachricht
Vektorpate
Threadersteller

Dabei seit: 05.09.2006
Ort: Hamburg
Alter: -
Geschlecht: Männlich
Verfasst Mi 08.08.2012 18:06
Titel

CSS3 image hover

 Antworten mit Zitat Zum Seitenanfang
Hey,

ich habe eine Frage bezüglich image hover per CSS3.
Ich habe einen Div mit Klasse .hs-wrapper, über welchen ich
mehrere Bilder per Mouseover ein- und aublenden lasse.
Meine Frage nun: wie könnte ich es per CSS regeln, dass
sobald man mit der Maus wieder vom Div weggeht, auch wieder
das erstgezeigte Bild angezeigt wird?

Über Rat wäre ich sehr dankbar!

Code:
.hs-wrapper {
   width:270px;
   height:173px;
    overflow: hidden;
    position: relative;
}

.hs-wrapper img{
   top: 0px;
   left: 0px;
   position: absolute;
   animation: showMe 5s linear infinite 0s forwards;
   animation-play-state: paused;   
}
.hs-wrapper img:nth-child(1){
   z-index: 9;
}
.hs-wrapper img:nth-child(2){
   animation-delay: 1s;
   z-index: 8;
}
.hs-wrapper img:nth-child(3){
   animation-delay: 2s;
   z-index: 7;
}
.hs-wrapper img:nth-child(4){
   animation-delay: 3s;
   z-index: 6;
}
.hs-wrapper img:nth-child(5){
   animation-delay: 4s;
   z-index: 5;
}

.hs-wrapper:hover img{
   animation-play-state: running;
}

@keyframes showMe {
    0% { visibility: visible; z-index: 100; }
   12.5% { visibility: visible; z-index: 100; }
   25% { visibility: hidden; z-index: 0; }
    100% { visibility: hidden; z-index: 0; }
}
  View user's profile Private Nachricht senden
Vektorpate
Threadersteller

Dabei seit: 05.09.2006
Ort: Hamburg
Alter: -
Geschlecht: Männlich
Verfasst Do 09.08.2012 11:23
Titel

Antworten mit Zitat Zum Seitenanfang
*push*
  View user's profile Private Nachricht senden
Anzeige
Anzeige
 
Ähnliche Themen [CSS3] Problem: transition durch :hover 'hakt'
Image hover tooltip
CSS Hover-Image-Map anklickbar machen?
hover-Button/hover-Bild wird darunter eingefügt
suche ein fall out Image Menu, mit 3 image ebenen
input type=image + image map
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.

Mediengestalter.info ist ein Projekt von Webformatik :: Forensoftware: phpBB