Przesuwanie diva po najechaniu. Opcje

[KingZG]

Witam,

poszukuję rozwiązanie by uzyskać efekt jak z tej strony http://fluidagency.pl/ ( sprawdzcie: dokładna analiza) , generalnie chodzi mi o to by po najechaniu na diva ten ustąpił miejsce drugiemu. Chciał bym zachować efekt graficzny przesunięcia.

Z góry dziękuję za pomoc.

Pozdrawiam KingZG

[PrinceOfPersia]

ja bym zrobił coś takiego:

--- div który będzie robił za kontenera (z ustawioną klasą np. "outer")
------------ div wewnętrzny
------------ drugi div wewnętrzny (ten który ma się pokazać po najechaniu)



- przy czym div zewnętrzny niech ma ustawioną stałą szerokość i wysokość (np. 200px na 200px) i overflow:hidden. Div zewnętrzny będzie takim kontenerem-oknem, przez które będziemy patrzeć na divy w środku.

- wysokość i szerokość divów wewnętrznych jest taka sama jak wymiary diva-kontenera, tym sposobem tylko pierwszy z divów będzie widoczny, a drugi się ukryje (ponieważ daliśmy overflow:hidden).

- za pomocą CSSa dodajemy deklarację

Kod

.outer:hover :first-child {
    margin-top: -200px;    
}

minus 200px dlatego że wysokość kontenera ustawiliśmy na 200px.

- oraz dodajemy odpowiednie CSS transitions

efekt - taki jak tutaj: http://jsfiddle.net/d3CqE/

Ten post edytował PrinceOfPersia 16.09.2013, 19:33:59