Bilder nach einander herrauszoomen

riemann88 · #1 (**permalink**) 28.03.2014, 11:06

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

Thielo · #2 (**permalink**) 28.03.2014, 11:25

Zitat:

Zitat von riemann88

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

riemann88 · #3 (**permalink**) 28.03.2014, 11:46

- 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

explanator · #4 (**permalink**) 28.03.2014, 13:09

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>

Manfred62 · #5 (**permalink**) 28.03.2014, 13:15

vermutlich ist sowas hier gemeint?
Create a Apple OSX style dock with jQuery using the Resize on Approach plugin
CSS Dock Menu

riemann88 · #6 (**permalink**) 28.03.2014, 13:49

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

da werd ich mal los legen....

dank dir

Ä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