pop: https://ianlunn.github.io[...] ?
--
Play: i7-9700K, Z390i Strix, GTX1070 Gaming X, 16GB@3ghz, Louqe Ghost S1, 1TB 970EVO, SF600, 34" AW3418DW 3440x1440@120Hz Work: 15.4" MBP Retina 2017

#1 @nuxx undskyld en forstår ingenting af dette
--

er "pop" effekten under 2D transitions det du søger? :)
--
Play: i7-9700K, Z390i Strix, GTX1070 Gaming X, 16GB@3ghz, Louqe Ghost S1, 1TB 970EVO, SF600, 34" AW3418DW 3440x1440@120Hz Work: 15.4" MBP Retina 2017

Det er faktisk rimelig godt beskrevet, hvis man lige læser det et par gang, inde på github siden under "how to use" https://github.com[...] Hvis du kopiere den kode der og sætter det ind i en af dine .css filer og derefter bruger den class omkring dine billeder, så skulle du gerne få din grow effect.
--

Studsede lidt over dit billede, da det ser meget mørkt og hjemmefoto-agtigt ud :) Har selv arbejdet en del med fotografi, så gav det lige et minut i photoshop - så kan du bruge det, hvis du har lyst. https://imgur.com[...]
--
Gæstebruger, opret dit eget login og få din egen signatur.

#5 Andreas tusind tak!<3
--

Forstår ikke rigtigt noget af hvordan man gør, er der ikke nogle der kan hjælpe mig, skal kun have det lavet på 6 billeder, tak på forhånd!
--

Dine billeder skal have: class="hvr-pop" og så skal følgende tilføjes din CSS: /* Pop */ @-webkit-keyframes hvr-pop { 50% { -webkit-transform: scale(1.2); transform: scale(1.2); } } @keyframes hvr-pop { 50% { -webkit-transform: scale(1.2); transform: scale(1.2); } } .hvr-pop { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .hvr-pop:hover, .hvr-pop:focus, .hvr-pop:active { -webkit-animation-name: hvr-pop; animation-name: hvr-pop; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; }
--
Gæstebruger, opret dit eget login og få din egen signatur.

#8 hun bruger noget one.com wysiwyg som er meget begrænset mht custom CSS. #7 jeg skal nok se om jeg ikke kan finde tid til at replicere den løsning jeg lavede på fe sidste 5 billeder - har du skabt det endelige galleri? (Der var jo dubletter i går?)
--
Play: i7-9700K, Z390i Strix, GTX1070 Gaming X, 16GB@3ghz, Louqe Ghost S1, 1TB 970EVO, SF600, 34" AW3418DW 3440x1440@120Hz Work: 15.4" MBP Retina 2017

#9 Hvornår har du tid?
--

Skal stadig bruge hjælp!
--

#11 Det burde være lige til at finde en ønsket effekt på Codepen og så blot paste CSSen ind. Om du lige kan finde "pop" effekten ved jeg ikke, men der er så mange andre flotte. :)
--
Gigabyte Z77X-D3H i5 3570k @ 4.3GHz - Corsair H100i 8GB Corsair Vengeance Asus RX580 4GB

#12 Kan du prøve hjælpe
--

#13 Det #8 skrev virker fint, og er sat ind på din side, men så længe du ingen billeder har på dine cases på forsiden, kan du ikke se det.
--

Sidst redigeret 02-03-2020 12:19

#13 Nu kan jeg ikke lige finde pop-effekten, men det er ret simpelt hvis du bare finder koden på Codepen (hvor du kan søge, f.eks. bare "image hover"). Der kan du også se preview af hvordan effekten er. F.eks. en simpel zoom effekt ved hover: #CLASS{ position:relative; transform: scale(1); transition: transform; transition-duration:1s; } #CLASS:hover{ transform: scale(1.1); transition: transform; transition-duration:1s; } Hvor CLASS er den du giver til dine billeder. edit: Har forsøgt #8s kode og den fungerer og giver den effekt du ønsker!
--
Gigabyte Z77X-D3H i5 3570k @ 4.3GHz - Corsair H100i 8GB Corsair Vengeance Asus RX580 4GB
--

Sidst redigeret 02-03-2020 13:11

For lige at uddybe #14 - således ser den animation ud, som #8 har lavet på din hjemmeside: https://recordit.co[...] (bemærk at det kører 100% flydende i virkeligheden. Dette er en gif). Så du mangler som sagt bare at få sat nogle billeder ind ligesom jeg har gjort i eksemplet her.
--

Sidst redigeret 02-03-2020 14:29

Vil også sige, at hvis one.com bliver brugt og man ikke har meget erfaring med webudvikling, så er det meget låst og ikke særlig brugervenligt. Det kan være utroligt irriterende at arbejde med hvis man ikke har styr på deres panel. Nu har jeg lige kigget lidt på de forslag der har været, og jeg vil mene at ift. den effekt der er lige nu, kan to simple linjer erstatte den nuværende CSS for .zoom img:hover. .zoom img { height: 400px; ?width: 280px; ?transition: all 0.7s; } Et eksempel ses ovenover hvor den eneste ændring er bare lige at smide en hurtig transition, dette vil gøre så når der har været hover på billede så vil billede zoome still og flot ud. Så er det bare at erstatte den meget grimme animation ved at fjerne .zoom img:hover { ... } og erstatte med lignende: .zoom img:hover { transform: scale(1.1); ??transition: all 0.7s; } Der er ikke brug for ekstern CSS til at udføre noget som en simpel 'grow/pop' animation, selvom at jeg også må erkende at det er flottere at bruge en meget mere udvidet version såsom IanLunn's Animerede Effekter. Den fil du skal ændre i er simpelthen the <style></style> tag du har lige før dine billeder kommer. Hvis der er flere spørgsmål så send mig gerne en besked, jeg arbejder lettere over Discord.
--

Sidst redigeret 06-04-2020 20:01