Avatar
Maxy_obr
Člen
Avatar
Maxy_obr:

Potřeboval bych udělat efekt u obrázku jako je na těchto stránkách. http://www.visitcalifornia.com/…-one-classic Při najetí na obrázek ho přiblížit(zvětšit) ale zároveň ořezávat aby měl stejnou velikost a také ztmavit. Zajímalo by mě jak moc je to složité a jakým způsobem toho vůbec dosáhnout. Budu rád za vaše rady.

 
Odpovědět 13.7.2015 20:09
Avatar
adder
Člen
Avatar
adder:

Ahoj,

Všechny tvé porblémy jdou vyřešit CSS3 a HTML. :) Takže JS můžeš vypusti.

Aby jsi mohl ořezávat, tak buď bude potřebovat nějakej wrapper s overflow: hidden; , ve kterém bude obrázek a po zvětšení se pěkně ořeže, přičemž musí být pořád centrován. Anebo si vezmeš nějaký box, do kterého nasadíš obrázek do pozadí (viz. moje řešení), ale nevýda je, že musíš řešit výšku resp. šířku boxu. Zkus zvětšit u mého řešení výšku a uvidíš jak to nepěkně skáče.

A animace řešiš přes transition, na to se mrkni, je to jednoduché. :)

Řešení: https://jsfiddle.net/o3wg0gwh/1/

Editováno 13.7.2015 20:36
Nahoru Odpovědět 13.7.2015 20:35
I’m going to lay this brick as perfectly as a brick can be laid.
Avatar
Maxy_obr
Člen
Avatar
Maxy_obr:

Musí to být univerzální nemohu pracovat s rodičovským elementem nebo alespoň ne s pokaždé se stejným.

 
Nahoru Odpovědět 13.7.2015 20:46
Avatar
adder
Člen
Avatar
Odpovídá na Maxy_obr
adder:

Tohle to je první řešení, univerzálnější.

https://jsfiddle.net/o3wg0gwh/2/

Akceptované řešení
+20 Zkušeností
Řešení problému
Nahoru Odpovědět  +1 13.7.2015 20:50
I’m going to lay this brick as perfectly as a brick can be laid.
Avatar
Maxy_obr
Člen
Avatar
Maxy_obr:

Díky :)

 
Nahoru Odpovědět  +1 13.7.2015 21:56
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 5 zpráv z 5.