NOVINKA - Online rekvalifikační kurz Java programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.
NOVINKA – Víkendový online kurz Software tester, který tě posune dál. Zjisti, jak na to!
Avatar
maxy obr
Člen
Avatar
maxy obr:13.7.2015 20:09

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:13.7.2015 20:35

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:13.7.2015 20:46

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:13.7.2015 20:50

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
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:13.7.2015 21:56

Díky :)

 
Nahoru Odpovědět
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.