zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Bilder nach einander herrauszoomen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 28.03.2014, 11:06
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.03.2014
Ort: Thüringen
Beiträge: 3
riemann88 befindet sich auf einem aufstrebenden Ast
Standard Bilder nach einander herrauszoomen

Servus,
nachdem ich mich jetzt Tagelang durch das WWW gegooglet hab und nichts gefunden habe was annährend hilfreich ist, hoffe ich das ihr mir helfen könnt.
Mit CSS bin ich noch nicht ganz so teif vertraut, wie Ihr es sicherlich seit.

Ich möchte eine Reihe von Icons (5Stk) nacheinander hervorheben, um etwas leben in eine Website zu bringen. Leider finde ich nichts, außer mit Mouseover, aber es soll ohne funktionieren.

Ich hoffe ihr könnt mir etwas folgen... kennt jmd eine Lösung?

Gruss Kay
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 28.03.2014, 11:25
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.375
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

Zitat:
Zitat von riemann88 Beitrag anzeigen
Ich hoffe ihr könnt mir etwas folgen....

Nein.

- Was für Icons (oder sinds Bilder?)
- Was heißt hervorheben
- Wie sieht dein Code aus
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato...
All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege

www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 28.03.2014, 11:46
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.03.2014
Ort: Thüringen
Beiträge: 3
riemann88 befindet sich auf einem aufstrebenden Ast
Standard

- Was für Icons (oder sinds Bilder?)
es sind ganz einfache PNG Icons.. also Bilder...

- Was heißt hervorheben
die sollen nacheinander etwas vergrößert werden...
mit mouseover geht das ja, aber ich möchte es so, das es on alleine passiert.

- Wie sieht dein Code aus
einen Code habe ich bis jetzt ja noch nicht. Weiß ja nicht wie man das im ansatz macht. Nur eben mit Mouseover...


hoffe konnte bisschen für aufklärung sorgen... Und hoffe auf Hilfe
Mit Zitat antworten
  #4 (permalink)  
Alt 28.03.2014, 13:09
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

Hatte gerade mal einen meiner Slider für dich ein wenig umgebaut.
Die Bilder kommen von einem freien Bildportal.

Basis ist scale für das vergrössern, animation für die eigentliche Bewegung und keyframes für den zeitlichen Ablauf. Damit das jeweils aktive Bild auch über den anderen beiden Bildern rechts und links drüberliegt habe ich da z-index mit drin.

Viel Spass

HTML-Code:
<!DOCTYPE HTML>
<html lang="de">
  <head>
  <meta charset="UTF-8">
  <title>zoom carousel test</title>
  
  <style type="text/css">
 
    div#slider { 
        max-width: 550px; 
        overflow: hidden; 
        border: 10px solid silver;
        background: black;
        color: white;
        padding: 50px;
    }
    
    .slider_cont img {
        width: 100px; 
        float:left; 
        height: 100px;
        padding: 0;
        margin: 0;
        margin-right:10px;
        position: relative;
        z-index:0;        
    }
 
    .slider_cont #img1{
        -webkit-animation: 25s slide1 infinite ease-out;
        -moz-animation: 25s slide1 infinite ease-out;
        animation: 25s slide1 infinite ease-out;
    }
    .slider_cont #img2{
        -webkit-animation: 25s slide2 infinite ease-out;
        -moz-animation: 25s slide2 infinite ease-out;
        animation: 25s slide2 infinite ease-out;
    }
    .slider_cont #img3{
        -webkit-animation: 25s slide3 infinite ease-out;
        -moz-animation: 25s slide3 infinite ease-out;
        animation: 25s slide3 infinite ease-out;
    }
    .slider_cont #img4{
        -webkit-animation: 25s slide4 infinite ease-out;
        -moz-animation: 25s slide4 infinite ease-out;
        animation: 25s slide4 infinite ease-out;
    }
    .slider_cont #img5{
        -webkit-animation: 25s slide5 infinite ease-out;
        -moz-animation: 25s slide5 infinite ease-out;
        animation: 25s slide5 infinite ease-out;
    }
    
    @-webkit-keyframes slide1 {
        20% { -webkit-transform: scale(1); z-index: 0;}
        25% { -webkit-transform: scale(1.5); z-index: 10; }
        30% { -webkit-transform: scale(1); z-index: 0;}
        100%{ -webkit-transform: scale(1); z-index: 0;} 
    }
    @-webkit-keyframes slide2 {
        30% { -webkit-transform: scale(1); z-index: 0; }
        35% { -webkit-transform: scale(1.5); z-index: 10; }
        40% { -webkit-transform: scale(1); z-index: 0;}
        100%{ -webkit-transform: scale(1); z-index: 0;} 
    }
    @-webkit-keyframes slide3 {
        40% { -webkit-transform: scale(1); z-index: 0; }
        45% { -webkit-transform: scale(1.5); z-index: 10; }
        50% { -webkit-transform: scale(1); z-index: 0;}
        100%{ -webkit-transform: scale(1); z-index: 0;} 
    }
    @-webkit-keyframes slide4 {
        50% { -webkit-transform: scale(1); z-index: 0; }
        55% { -webkit-transform: scale(1.5); z-index: 10; }
        60% { -webkit-transform: scale(1); z-index: 0;}
        100%{ -webkit-transform: scale(1); z-index: 0;} 
    }
    @-webkit-keyframes slide5 {
        60% { -webkit-transform: scale(1); z-index: 0; }
        65% { -webkit-transform: scale(1.5); z-index: 10; }
        70% { -webkit-transform: scale(1); z-index: 0;}
        100%{ -webkit-transform: scale(1); z-index: 0;} 
    }
    
    @keyframes slide1 {
        20% { transform: scale(1); z-index: 0;}
        25% { transform: scale(1.5); z-index: 10; }
        30% { transform: scale(1); z-index: 0;}
        100%{ transform: scale(1); z-index: 0;} 
    }
    @keyframes slide2 {
        30% { transform: scale(1); z-index: 0; }
        35% { transform: scale(1.5); z-index: 10; }
        40% { transform: scale(1); z-index: 0;}
        100%{ transform: scale(1); z-index: 0;} 
    }
    @keyframes slide3 {
        40% { transform: scale(1); z-index: 0; }
        45% { transform: scale(1.5); z-index: 10; }
        50% { transform: scale(1); z-index: 0;}
        100%{ transform: scale(1); z-index: 0;} 
    }
    @keyframes slide4 {
        50% { transform: scale(1); z-index: 0; }
        55% { transform: scale(1.5); z-index: 10; }
        60% { transform: scale(1); z-index: 0;}
        100%{ transform: scale(1); z-index: 0;} 
    }
    @keyframes slide5 {
        60% { transform: scale(1); z-index: 0; }
        65% { transform: scale(1.5); z-index: 10; }
        70% { transform: scale(1); z-index: 0;}
        100%{ transform: scale(1); z-index: 0;} 
    }

    </style>

    </head>

    <body>
        <div id="slider">
            <div class="slider_cont">
            <img id="img1" src="http://lorempixel.com/200/200/food/" alt="">
            <img id="img2" src="http://lorempixel.com/200/200/sports/" alt="">
            <img id="img3" src="http://lorempixel.com/200/200/city/" alt="">
            <img id="img4" src="http://lorempixel.com/200/200/fashion/" alt="">
            <img id="img5" src="http://lorempixel.com/200/200/technics/" alt="">
            </div>
        </div>
    </body>
</html>
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
  #5 (permalink)  
Alt 28.03.2014, 13:15
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.134
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

vermutlich ist sowas hier gemeint?
Create a Apple OSX style dock with jQuery using the Resize on Approach plugin
CSS Dock Menu
Mit Zitat antworten
  #6 (permalink)  
Alt 28.03.2014, 13:49
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.03.2014
Ort: Thüringen
Beiträge: 3
riemann88 befindet sich auf einem aufstrebenden Ast
Standard

Danke explanator ... sowas meinte ich... voll geil....

da werd ich mal los legen....

dank dir
Mit Zitat antworten
Antwort

Stichwörter
css, effekt, hervorheben, icons, ohne mouseover, zoom

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Zwei Bilder nebeneinander, sollen kleiner werden! cecyle CSS 1 12.01.2014 18:20
Bilder über einander legen adl-solutions CSS 2 14.09.2013 23:39
Hintergrund wird nicht angezeigt maxx CSS 6 14.10.2012 18:27
Hilfe!!! mein Homepagelayout funktioniert nicht! maxx CSS 5 14.10.2012 07:21
Bildergalerie mit Variablen fledermaus Serveradministration und serverseitige Scripte 1 08.04.2008 08:57


Alle Zeitangaben in WEZ +2. Es ist jetzt 03:48 Uhr.