• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

eine komplexe animation machen

ante2004

Neues Mitglied
Hallo an alle die das lesen ich bin dabei eine seite für meine schule zu machen doch ich habe dort
ein großes problem das ist nämlich eine animation die so funktionieren soll das, wenn man mit der
maus über ein bild kommt soll das bild von dunkel auf hell gehen (das habe ich ja schon) doch wäh-
rend dessen soll die bildunterschrift (zb. "jetzt schauene neues maazien") runterfahren also vom
bild runter. ich habe es mit hover gemacht doch das gleichzeitige animieren bekomme ich nicht hin.


HTML:
<!doctype html>
<html>
        <head>
            <meta name="vievport" content="width-device-width, initial-scale-1.0">
            <meta charset="utf-8" />
            <link rel="stylesheet" href="rasstart.css" type="text/css">
            <link rel= "stylesheet" href="animation.css" type="text/css">
            <title> Realschule am Stadtpark</title>
        
        </head>
        
<body>

    <div id="uberdie">
<header>
        <a href="startseite.html"><img src="bilder/bilderyan/hammer.png" alt="Logo von der RAS"></a>
        <div id="navi">
            <nav>
            
                <ul>
                
                    <li><a href="startseite.html">Startseite</a></li>
                    <div class="dropdown">
                    <button class="dropbtn">Wir Über uns</button>
                    <div class="dropdown-content">
                        <a href="seite im arbeit.html">Schulleitung</a>
                        <a href="kollegiumalpha.html">Kollegium</a>
                        <a href="seite im arbeit.html">Seketeriat</a>
                        <a href="seite im arbeit.html">Hausverwaltung</a>
                        <a href="seite im arbeit.html">Schulsozialarbeit</a>
                        <a href="seite im arbeit.html">Schülervertretung</a>
                        <a href="seite im arbeit.html">Schulpflegschaft</a>
                        <a href="seite im arbeit.html">Pausenkiosk MCSchool</a>
                        <a href="seite im arbeit.html">Förderverein</a>
                    </div>
                    </div>
                    <li><a href="termine.html">Termine</a></li>
                    <div class="dropdown">
                    <button class="dropbtn">Algemeine Informationen</button>
                    <div class="dropdown-content">
                        <a href="seite im arbeit.html">Schulabschuss</a>
                        <a href="seite im arbeit.html">Zentrale Abschlussprüfung</a>
                        <a href="seite im arbeit.html">Lernstanderhebung</a>
                        <a href="seite im arbeit.html">Lehrerraumprinzip</a>
                        <a href="seite im arbeit.html">Schulgeschichte</a>
                        <a href="seite im arbeit.html">Hausordnung</a>
                        <a href="seite im arbeit.html">Impressung</a>
                        <a href="seite im arbeit.html">Konatakt</a>
                    </div>
                    </div>
                    <div class="dropdown">
                    <button class="dropbtn">Schulprofil</button>
                    <div class="dropdown-content">
                        <a href="seite im arbeit.html">Schulprogramm</a>
                        <a href="seite im arbeit.html">Bildvertrag</a>
                        <a href="seite im arbeit.html">Beratung und Kooperation</a>
                        <a href="seite im arbeit.html">Pädagogische Übermittagsbetreuung</a>
                        <a href="seite im arbeit.html">Lernbüro</a>
                        <a href="seite im arbeit.html">Schule ohne Rassismus</a>
                        <a href="seite im arbeit.html">Waisenhaus ihn Indien</a>
                        <a href="seite im arbeit.html">Schtreitschlichtung</a>
                        <a href="seite im arbeit.html">Schulsanitäter</a>
                    </div>
                    </div>
                    <li><a href="abschluss_seite.html">Abschluss - und was dann?</a></li>
                    <li><a href="unterricht.html">Unterricht</a></li>
                    <li><a href="schulzeitung.html">Schülerzeitung</a></li>
                    <li><a href="downl_serv.html">Downloads/Service</a></li>
                    <li><a href="archiv.html">Archiv</a></li>
    
                </ul>
            </nav>
        </div>   
<!-- ende div navi -->   
    </div>
    
        
</header>
<section>
    <div class="article">
        <img src="bilder/sport.png" alt="">
        <div class="link"><span>Gewonnen-RAS macht Doppelpack</span></div>
    </div>
    
    
</section>

<aside>
    <p><strong>Nebeninformationen</strong></p>
</aside>
<aside>
    <p><strong>Infos</strong></p>

</aside>




<script src="scripts/start.js"></script>
<footer>
<img  src="bilder/bilderyan/banner.png" alt="B Systems">
<div class="linksfoot"><p><a href="#">Datenschutzerklärung</a></p></div>






</footer>

</body>

</html>

CSS:
/*drop dowm Animation über CSS*/
.dropbtn {
     text-transform: uppercase;
    background-color: white;
    color: #444;
    height: 50px;
    padding-left: 20px;
    font-size: 14px;
    border: none;
    
    font-family: arial black, sans-serif;
}


.dropdown-content {
    display: none;
    position: absolute;
    background-color: lightgrey;
    min-width: 200px;
    margin-top: -5px;
    z-index: 1;
    
}

.dropdown {
    
    position: relaztiv;
    display: inline-block;
}

.dropdown-content a {
    color: #444;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {
    background-color: lightgrey;
    text-align: right;
}
.dropdown:hover .dropdown-content {
    display: block;
    background-color: lightgrey;
    border: 1px solid #777;
}
.dropdown:hover .dropbtn {
    background-color: #FFFFFF;
    }
/* Ende Animation*/

/* Beginn animation Balken Über dropdown mit css*/

.dropbtn a:hover {
  color: #000;
}
.dropbtn a:hover {
  color: #000;
}

.dropbtn a::before {
  content: '';
  display: block;
  height: 5px;
  background-color: #444;

  position: absolute;
  top: 0;
  width: 0%;

  transition: all ease-in-out 250ms;
}

.dropbtn a:hover::before {
  width: 100%;
}




.dropdown-content a:hover {
  color: #000;
}
.dropdown-content a:hover {
  color: #000;
}

.dropdown-content a::before {
  content: '';
  display: block;
  height: 5px;
  background-color: #444;

  position: absolute;
  left:0px;
  top: 0;
  width: 0%;

  transition: all ease-in-out 250ms;
}

 a:hover::before {
  width: 100%;
}

/* ende animation balken über dropdown menu css*/

/* Beginn Animation balken über Navigation mit CSS */
nav a:hover {
  color: #000;
}
nav a:hover {
  color: #000;
}

nav a::before {
  content: '';
  display: block;
  height: 5px;
  background-color: #444;

  position: absolute;
  top: 0;
  width: 0%;

  transition: all ease-in-out 250ms;
}

nav a:hover::before {
  width: 100%;
}
a {
    color: #000000;
    text-decoration: none;
    font-family: arial black, sans-serif;
}

/* Animation Bilder feed*/

.article img:hover{
    filter: brightness(1.0); 
    transition: all ease-in-out 300ms;
    
}

.article span:hover {
    bottom: -50px;
    color: black;
transform: translate(30px, 0px);
transition: all ease-in-out;
}
.link span{
    display: center;
margin-right: auto;
    margin-left: auto;
    background-color: red;
    }


danke nochmals für die hilfe
 
Werbung:
Zurück
Oben