Płynna zmiana z-index Opcje

[pietrov8]

Witam.

Mam oto animację w CSS dla dwóch obrazków:

Kod

img.images1{
position:absolute;
left:0;
z-index:0;}

img.images1:hover{
z-index:2}

img.images2{
position:absolute;
left:120px;
z-index:1;}

I wszystko działa jak należy, lecz chciałbym by to płynnie się odbywało coś w stylu fade in i out. Ma ktoś jakiś pomysł(IMG:style_emoticons/default/questionmark.gif)

[kamil4u]

http://kukawski.pl/tmp/Slideshow/index.html - jak to nie to to opisz trochę dokładnie - najlepiej z przykładem, bo nie chcę "napracować się" bez sensu (IMG:style_emoticons/default/smile.gif)

[pietrov8]

Test

Tak jak jest tutaj u samej góry te 5 obrazków lecz one są zrobione tylko w CSS i są bardzo proste, chciałbym by to miało efekt płynnego przejścia.

[kamil4u]

Przy takim układzie zdjęć będzie to trochę ciężkie do zrobienia (IMG:style_emoticons/default/smile.gif)
No, ale do dzieła:
- podziel zdjęcia na połówki - 6 div-ów
--- zakładamy, że najeżdżasz na drugie zdjęcie
- wtedy w 3-divie masz 2 połówki zdjęć - lewa część środkowego(widoczne)(przezroczystość 0%) i prawą część 2 zdjęcia( niewidoczne )(przezroczystość 100%)
- jednocześnie zmieniasz przezroczystość połówkom, gdy osiągnie ono 50% zmieniasz przezroczystość "dalej"
- przezroczystość możesz w łatwy sposób zrobić sam lub możesz też skorzystać z biblioteki np. jQuery - jeśli wybierzesz pierwszą opcję i będziesz chciał to mogę Ci dać dalsze wskazówki

Jak coś to pytaj (IMG:style_emoticons/default/smile.gif)
Jak nie uda Ci się osiągnąć zamierzonego efektu to podaj nam to co zrobiłeś i ew. wtedy napiszę coś więcej - bez pokazania prób, nie licz na gotowca (IMG:style_emoticons/default/smile.gif)

[zegarek84]

innych materiałów nie chce mi się szukać ;]
Using CSS3 Transitions, Transforms and Animation

ps. jeszcze coby to było bezboleśnie przenikanie to obrazki daj w div'ach np. i po 2 takie same, z tą różnicą, że ten drugi jest wypozycjonowany nad pierwszym i oczywiście ukryty... gdy masz hover na danym div'ie pokazujesz obrazek z przezroczystością i tak aż będzie widoczny cały - skoro był ukryty, to z-index odpowiedni można było wcześniej ustawić... przy tym "algorytmie" łatwo to możesz zrobić albo za pomocą samego CSS [oczywiście nie we wszystkich przeglądarkach będzie to chodziło] albo za pomocą jQuery...

edit
tak teraz zwróciłem uwagę, że na tamtej stronie masz także przykłady z jQuery lub z samym CSS więc nie powinieneś mieć problemów

Ten post edytował zegarek84 9.06.2011, 23:43:35