eine komplexe animation machen

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

ante2004

Neues Mitglied
22 November 2018
1
0
1
22
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
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.282
263
83
66
Statt des <div class="article">würde ich vorschlagen, ein figure-Tag zu verwenden:
https://wiki.selfhtml.org/wiki/HTML/Textstrukturierung/figure
den Text in das figcaption zu legen und keine weiteren Elemente darum herum oder hinein zu legen.
Um die Position zu ändern gibt es mehrere Möglichkeiten:
  • Absolut positionieren und die Position, z. B. bottom animieren (was Du anscheinend schon versucht hast).
  • Ohne absolute Positionierung die Lage mit transform: translate verändern (was Du anscheinend auch schon versucht hast).
  • margin verändern.
Entscheide dich für nur eine Möglichkeit und wenn Du es nach dem Muster des img:hover machst, sollte es funktionieren.
 
Werbung:

Latest posts