Seneste forumindlæg
Køb / Salg
 * Uofficiel Black/White liste V2
Login / opret bruger

Forum \ Programmering og webdesign \ Hjemmeside design

Hjælp html/css nørder!

Af Bruger Aspirant Zille | 25-02-2020 20:05 | 1926 visninger | 17 svar, hop til seneste
Jeg er igang med lave denne portfolio side til mig selv: https://kidigrafisk.dk[...] Jeg vil gerne have hvis man kan høre sådan når man mouseover et projektbillede, den så hopper/pulser engang, men jeg skal bruge en html/css kode til dette, da det ikke er en funktion, hjælp!
--
#1
nuxx
Guru
25-02-2020 20:07

Rapporter til Admin
pop: https://ianlunn.github.io[...] ?
--
Play: i7-9700K, Z390i Strix, GTX1070 Gaming X, [email protected], Louqe Ghost S1, 1TB 970EVO, SF600, 34" AW3418DW [email protected] Work: 15.4" MBP Retina 2017
#2
Zille
Bruger Aspirant
25-02-2020 20:16

Rapporter til Admin
#1 @nuxx undskyld en forstår ingenting af dette
--
#3
nuxx
Guru
25-02-2020 20:27

Rapporter til Admin
er "pop" effekten under 2D transitions det du søger? :)
--
Play: i7-9700K, Z390i Strix, GTX1070 Gaming X, [email protected], Louqe Ghost S1, 1TB 970EVO, SF600, 34" AW3418DW [email protected] Work: 15.4" MBP Retina 2017
#4
Thums
Ultrabruger
25-02-2020 20:36

Rapporter til Admin
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.
--
#5
Andreas
Gæst
25-02-2020 20:39

Rapporter til Admin
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.
#6
Zille
Bruger Aspirant
25-02-2020 21:11

Rapporter til Admin
#5 Andreas tusind tak!<3
--
#7
Zille
Bruger Aspirant
26-02-2020 21:14

Rapporter til Admin
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!
--
#8
Marc
Gæst
26-02-2020 23:49

Rapporter til Admin
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.
#9
nuxx
Guru
26-02-2020 23:57

Rapporter til Admin
#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, [email protected], Louqe Ghost S1, 1TB 970EVO, SF600, 34" AW3418DW [email protected] Work: 15.4" MBP Retina 2017
#10
Zille
Bruger Aspirant
27-02-2020 09:07

Rapporter til Admin
#9 Hvornår har du tid?
--
#11
Zille
Juniorbruger
02-03-2020 08:05

Rapporter til Admin
Skal stadig bruge hjælp!
--
#12
Juusuhako
Elite Nørd
02-03-2020 10:04

Rapporter til Admin
#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
#13
Zille
Juniorbruger
02-03-2020 12:16

Rapporter til Admin
#12 Kan du prøve hjælpe
--
#14
Jepperdepper
Ultra Supporter
02-03-2020 12:19

Rapporter til Admin
#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
#15
Juusuhako
Elite Nørd
02-03-2020 13:09

Rapporter til Admin
#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
#16
Jepperdepper
Ultra Supporter
02-03-2020 14:29

Rapporter til Admin
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
#17
GodLess
Ny på siden
06-04-2020 20:01

Rapporter til Admin
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

Opret svar til indlægget: Hjælp html/css nørder!

Grundet øget spam aktivitet fra udlandet, er det desværre ikke muligt for dig, at oprette svar som gæst.

Hvis du ønsker at deltage i debatten, skal du oprette en brugerprofil.

Opret bruger | Login
NYHEDSBREV
Afstemning