Frage von eidgenoss1291, 27

Wie funktioniert ein Zoom in einer html/css slideshow?

guten tag,

ich habe eine Slideshow mit CSS3 gemacht und möchte, dass wenn ein Bild in der Slideshow erscheint, dass es noch so reinzoomt wie hier:

http://cssslider.com/de/html-slideshow-9.html

Hier mein CSS-Code:

.con{
width: 100%;
height: 540px;
overflow: hidden;
position: relative;
background-color: #F8F8F8;
}


.img{
    position: absolute;
    width: 100%;
    height: auto;
    -webkit-animation: mm 30s infinite;
    -moz-animation: mm 30s infinite;
    -o-animation: mm 30s infinite;
    animation: mm 30s infinite;
    opacity: 0;
}

@-webkit-keyframes mm{
    25%{opacity:1}
    33.33%{opacity:0}
    91.66%{opacity:0}
    100%{opacity}
}           

@-moz-keyframes mm{
    25%{opacity:1}
    33.33%{opacity:0}
    91.66%{opacity:0}
    100%{opacity}
}

@-o-keyframes mm{
    25%{opacity:1}
    33.33%{opacity:0}
    91.66%{opacity:0}
    100%{opacity}
}

@keyframes mm{
    25%{opacity:1}
    33.33%{opacity:0}
    91.66%{opacity:0}
    100%{opacity}
}

img:nth-child(0){animation-delay: 0s; -webkit-animation-delay: 0s; -moz-animation-delay: 0s; -o-animation-delay: 0s; }
img:nth-child(1){animation-delay: 10s; -webkit-animation-delay: 10s; -moz-animation-delay: 10s; -o-animation-delay: 10s;}
img:nth-child(2){animation-delay: 20s; -webkit-animation-delay: 20s; -moz-animation-delay: 20s; -o-animation-delay: 200s;}

Vielen Dank im voraus Nicola

Antwort
von WhiteGandalf, 27

Wo befindet sich die Frage?

Die verlinkte Seite enthält alles, was man braucht. Du HAST (as a matter of fact) alles, was Du brauchst. Dein CSS-Code zeigt es.

Was also willst Du eigentlich darüber hinaus wissen?

Bzw.: Was zum Himmeldonnerwetter funktioniert denn nun nicht?

Kommentar von eidgenoss1291 ,

Es funktioniert ja alles. Doch ich würde gerne noch so einen Effekt hinzufügen, wo in die Slideshow ein bisschen Leben erwekt wird, sprich, dass die Bilder gezoomt werden. Vielen Dank. 

Kommentar von WhiteGandalf ,

Es ist möglich, jedes CSS-Attribut zu verändern, das einen skalaren Wert darstellt. Dazu gehören auch die width und height eines Bildes. Oder dessen Containers. Ooder - wenns mit Drehung sein soll - deren "transformation" mit "rotation" und "scale".

Wie gesagt: Dein CSS enthält an technischen Elementen längst schon alles, was es braucht. Du bräuchtest bloß die Attribut-Änderungen, die Du gern hättest, ergänzen. Experimentiere doch einfach mal mit dem Zeug herum, dann wird das Prinzip schnell klar, so dass Du es kreativ weiter verwenden kannst...

Antwort
von fluffiknuffi, 18

Via CSS: transition + transform scale

https://css-tricks.com/snippets/css/scale-on-hover-with-webkit-transition/

Keine passende Antwort gefunden?

Fragen Sie die Community