Ergebnis 1 bis 5 von 5

Thema: Animation funzt nur mit mit Pseudoklasse

  1. #1
    HTML Newbie
    Registriert seit
    06.03.2019
    Beiträge
    2
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Animation funzt nur mit mit Pseudoklasse

    Hallo Ihr Wissenden,

    erst einmal einen Gruß vom Rande Berlins - bin völlig neu hier.

    Ich habe eine Slideshow die wunderbar funzt. Und immer wenn ein neues Bild kommt soll die Beschreibung der Bilder so schön einfliegen.
    wenn Ihr euch die CSS Datei anseht, habe ich die Zeilen mit :hover auskommentiert und eine neue Zeile ohne :hover eingefügt.
    Mit :hover funzt die Animation ohne :hover funzt die Animation nicht mehr.
    Hat jemand eine Idee? Danke schon mal.

    HTML sieht so aus:

    HTML-Code:
    <div id="slider">
      <ul class="rslides">
        <li><figure><img src="<?php echo $tpath; ?>/images/slide0.jpg" alt="Webdesign_Style"><figcaption><h3>Überschrift 1</h3><p>Text Text Text.</p></figcaption></figure></li>
        <li><figure><img src="<?php echo $tpath;  ?>/images/slide0.jpg"  alt="Webdesign_Style"><figcaption><h3>Überschrift 2</h3><p>Text Text  Text.</p></figcaption></figure></li>
        <li><figure><img src="<?php echo $tpath;  ?>/images/slide0.jpg"  alt="Webdesign_Style"><figcaption><h3>Überschrift 3</h3><p>Text Text  Text.</p></figcaption></figure></li>
      </ul>
    </div><!-- End id=slider -->

    und CSS
    Code:
    figure {
        margin: 0;
        padding: 0;
        /*height: 543px;
        width: 810px;*/
        max-width: 800px;
        height: auto;
        position: relative;
        display: block;
        cursor: pointer;
        overflow: hidden;
        
    }
    /*figure:hover figcaption*/
    figure figcaption {
        -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
        filter: alpha(opacity=100);
        opacity: 1;
        -webkit-transform: rotate(0);
        -moz-transform: rotate(0);
        -o-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0);
        top: 0;
    }
    
    figcaption {
        -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
        filter: alpha(opacity=0);
        opacity: 0;
        position: absolute;
        height: 100%;
        width: 100%;
        /*height: 530px;
        width: 790px;*/
                    top: -100%;
        background: rgba(3,3,3,.3);
        color: #fff;
        border-radius: 18px;
        -webkit-transition: all .5s ease;
        -moz-transition: all .5s ease;
        -o-transition: all .5s ease;
        -ms-transition: all .5s ease;
        transition: all .5s ease;
        -webkit-transition-delay: .5s;
        -moz-transition-delay: .5s;
        -o-transition-delay: .5s;
        -ms-transition-delay: .5s;
        transition-delay: .5s;
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
    
    figcaption h3 {
        font-family: 'Open Sans Condensed',sans-serif;
        font-weight: 700;
        color: #0088cc;
        padding: 10px 20px;
        margin-bottom: 0;
        position: relative;
        left: 100%;
        margin-top: 37px;
        font-size: 30px;
        -webkit-transition: all .5s;
        -moz-transition: all .5s;
        -o-transition: all .5s;
        -ms-transition: all .5s;
        transition: all .5s;
        -webkit-transition-delay: 1s;
        -moz-transition-delay: 1s;
        -o-transition-delay: 1s;
        -ms-transition-delay: 1s;
        transition-delay: 1s;
    }
    
    figcaption p {
        font-family: Verdana, Arial, sans-serif;
        padding: 10px 20px;
        margin-bottom: 0;
        margin-top: 20px;
        position: relative;
        left: 100%;
        font-size: 14px;
        -webkit-transition: all .5s;
        -moz-transition: all .5s;
        -o-transition: all .5s;
        -ms-transition: all .5s;
        transition: all .5s;
        -webkit-transition-delay: 1.3s;
        -moz-transition-delay: 1.3s;
        -o-transition-delay: 1.3s;
        -ms-transition-delay: 1.3s;
        transition-delay: 1.3s;
    }
    /*figure:hover h3,figure:hover p*/
    figure h3,figure p {
        left: 0;
    }
    figcaption a {
        color: #fff;
        border: 2px solid #fff;
        padding: 4px 10px;
        text-decoration: none;
        -moz-box-shadow:inset 0px -3px 7px 0px #29bbff;
        -webkit-box-shadow:inset 0px -3px 7px 0px #29bbff;
        box-shadow:inset 0px -3px 7px 0px #29bbff;
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0088cc), color-stop(1, #2dabf9));
        background:-moz-linear-gradient(top, #0088cc 5%, #2dabf9 100%);
        background:-webkit-linear-gradient(top, #0088cc 5%, #2dabf9 100%);
        background:-o-linear-gradient(top, #0088cc 5%, #2dabf9 100%);
        background:-ms-linear-gradient(top, #0088cc 5%, #2dabf9 100%);
        background:linear-gradient(to bottom, #0088cc 5%, #2dabf9 100%);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#2dabf9',GradientType=0);
        background-color:#0088cc;
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
        border-radius:3px;
        border:1px solid #0b0e07;
        display:inline-block;
        cursor:pointer;
        font-family:Arial;
        font-size:14px;
        text-decoration:none;
        text-shadow:0px 1px 0px #263666;
    }
    /*figcaption a:hover*/
    figcaption a {
    
        
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #2dabf9), color-stop(1, #0088cc));
        background:-moz-linear-gradient(top, #2dabf9 5%, #0088cc 100%);
        background:-webkit-linear-gradient(top, #2dabf9 5%, #0088cc 100%);
        background:-o-linear-gradient(top, #2dabf9 5%, #0088cc 100%);
        background:-ms-linear-gradient(top, #2dabf9 5%, #0088cc 100%);
        background:linear-gradient(to bottom, #2dabf9 5%, #0088cc 100%);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2dabf9', endColorstr='#0088cc',GradientType=0);
        background-color:#0088cc;
        color:#666;
    }

  2. #2
    König(in)
    Registriert seit
    13.06.2012
    Beiträge
    1.384
    Danke
    17
    Bekam 74 mal "Danke" in 72 Postings

    Standard AW: Animation funzt nur mit mit Pseudoklasse

    Da du PHP mit drin hast, wäre ein Link zu deiner Seite sinnvoll.
    Gegen Mods kommt man nicht an, die haben immer Recht. Sind scheinbar nicht kritikfähig.

  3. #3
    Großmeister(in)
    Registriert seit
    24.10.2016
    Beiträge
    633
    Danke
    0
    Bekam 46 mal "Danke" in 45 Postings

    Standard AW: Animation funzt nur mit mit Pseudoklasse

    Funzt? Das heißt immer noch funktioniert.

  4. #4
    HTML Newbie
    Themenstarter

    Registriert seit
    06.03.2019
    Beiträge
    2
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Animation funzt nur mit mit Pseudoklasse

    Funzt steht sogar im Duden
    https://www.duden.de/rechtschreibung/funzen

    - - - Aktualisiert - - -

    der Schnipsel php ist bedeutungslos - da wird nur der Path vervollständigt.

  5. #5
    König(in)
    Registriert seit
    13.06.2012
    Beiträge
    1.384
    Danke
    17
    Bekam 74 mal "Danke" in 72 Postings

    Standard AW: Animation funzt nur mit mit Pseudoklasse

    Zitat Zitat von Uranus
    der Schnipsel php ist bedeutungslos - da wird nur der Path vervollständigt.
    Wenn dir keiner helfen soll, auch okay. Mit dem, was du hier reinstellst, kann zumindest ich, dein Problem nicht nachstellen, da z.B. die komplette HTML-Datei fehlt. Deswegen meine Frage nach einem Link.
    Viel Erfolg
    Gegen Mods kommt man nicht an, die haben immer Recht. Sind scheinbar nicht kritikfähig.

Ähnliche Themen

  1. GIF-Animation
    Von wdesign im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 4
    Letzter Beitrag: 16.06.2009, 20:06
  2. css - pseudoklasse color geht i-wie net!
    Von donfey im Forum HTML & CSS Forum
    Antworten: 12
    Letzter Beitrag: 10.07.2007, 14:10
  3. animation mit IR CS
    Von goodn8 im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 4
    Letzter Beitrag: 12.04.2007, 20:41
  4. animation DHTML
    Von Webby im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 4
    Letzter Beitrag: 14.06.2005, 13:45
  5. Animation
    Von Nanny im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 12.12.2004, 19:59

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •