fransker Novice
23. marts 2020 - 10:40 Der er 10 kommentarer

CSS for shadow on hover

Hej,

Jeg sidder med https://colego.dk/ og vil gerne have forskellige elementer til at zoome lidt ind og få en shadow når jeg hover over dem.. Det er nederst på siden når man vælger erhverv... Kan der være conflicting CSS eller noget?

Mvh,

Frederik
jakobdo Ekspert
23. marts 2020 - 12:27 #1
Det kan det sikkert godt være ja.

Og det svar er lige så godt som dit spørgsmål. :)

Beklager, men tror du skal stille dit spørgsmål mere skarpt.
Må jeg ikke foreslå du laver en jsfiddle og laver et element hvor du ønsker før omtalte effekt. Så kan folk meget nemmere se fejlen og komme med ideer.
PT ser man en side og aner ikke hvor der skal kigges. (men er bare mine tanker)
Slater Ekspert
23. marts 2020 - 13:44 #2
Jeg får desværre på fornemmelsen at dette er endnu en linkfarmer, eftersom han kun har stillet spørgsmål med links i, og det ikke er særlig godt formuleret.

Det er ærgerligt man er nødt til at være så pessimistisk. Det ødelægger så meget af oplevelsen af Eksperten, og det kunne løses så nemt.
fransker Novice
23. marts 2020 - 13:56 #3
Jeg prover med dette CSS (taget fra kiloo.com) : 

  line-height: 0;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform, box-shadow;
    -moz-transition-property: transform, box-shadow;
    -o-transition-property: transform, box-shadow;
    transition-property: transform, box-shadow;
jakobdo Ekspert
23. marts 2020 - 17:05 #4
Det burde stadig være nemt for dig at lave en jsfiddle eller codepen og smide dette css + html ind og vi måske sammen kunne løse problemet.
Eller har den gode Slater fat i noget af det rigtige?
Og ja, det er skidt man skal være pessimistisk fra start og ikke bare kan antage alle folk har gode hensigter i disse tider. :(
fransker Novice
24. marts 2020 - 11:09 #5
Har sat det op så det er ret basic:

https://jsfiddle.net/57zjp3o2/3/

Håber det hjælper... Det er første gang jeg brugte JSfiddle
Slater Ekspert
24. marts 2020 - 13:26 #6
For det første staver du dine klasser forkert. De hedder .verticals-list__item, ikke .vertical-list_item

For det andet fortæller du med din transition hvad du gerne vil have til at skifte ved hover, men ikke hvilken værdi den skal skifte til. Du skal også sætte en box-shadow på ved hover.
fransker Novice
25. marts 2020 - 17:05 #7
Nu har jeg fået animationen til at virke, men den vil ikke tilføje shadow !!!

https://jsfiddle.net/0khb9tsj/
Slater Ekspert
25. marts 2020 - 17:11 #8
Skyggen er der, men den er på dit ::after pseudoelement, som ikke er synligt. Hvad er pointen med det?

Du har lavet elementet, men eftersom det hverken har indhold eller størrelse sat, er det 0x0 pixels og kan ikke ses.
fransker Novice
25. marts 2020 - 17:38 #9
Gud ja! Sorry, brainfart...  Arbejde hjemme er hårdere end jeg regnede med
fransker Novice
25. marts 2020 - 17:48 #10
Så er den vist fikset ! Ved ikke om det er den bedste løsning i forhold til responsiveness? Nogle der har bedre måder at lave det på ?

https://jsfiddle.net/hy31a6t0/1/
Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links

Opret Preview

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester





Premium
Test: Huaweis Matebook X er særlig laptop med en svaghed, som du skal være opmærksom på
Huawei beviser endnu en gang, at de sagtens kan mingle sig med de bedste pc-producenter. Men alligevel skyder selskabet lidt ved siden af, med sin nyeste maskine.
Computerworld
Bitcoinen nåede lige at kulminere igen – men så kom krakket
Der blev sat en ny rekord for bitcoinens værdi i år – men godt 24 timer efter blev der høvlet næsten 20.000 kroner af den.
CIO
Podcast: Her er seks gode råd om ledelse og digitalisering fra danske top-CIO'er
The Digital Edge: Vi har talt med 17 af Danmarks dygtigste digitale ledere - og samlet deres seks bedste råd om digitalisering og ledelse. Få alle rådene på 26 minutter i denne episode af podcasten The Digital Edge.
Job & Karriere
Se Waoos forklaring: Derfor har selskabet fyret topchef Jørgen Stensgaard med omgående virkning
Waaos bestyrelse opsiger fiberselskabets topchef, Jørgen Stensgaard, der fratræder med omgående virkning. Se hele forklaringen fra Waao her.
White paper
Sådan øger du medarbejdertilfredshed og produktivitet
En af de mest effektive måder at øge medarbejdernes produktivitet og tilfredshed med arbejdspladsen er ved at give frit valg mellem Windows eller Mac, når der skal vælges arbejdscomputer. Samtidig mindskes presset på supporten, mens sikkerhedsniveauet højnes. Med en client-as-a-service aftale kan du lade medarbejderne selv træffe valget, men uden at uden at det behøver at være udfordrende eller ressourcekrævende for virksomheden. Eksempelvis kan du lade partneren håndtere alt fra finansiering, leverance, klargøring og implementering til support og lifecycle-management. Læs mere i denne hvidbog.