Avatar billede 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
Avatar billede 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)
Avatar billede 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.
Avatar billede 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;
Avatar billede 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. :(
Avatar billede 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
Avatar billede 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.
Avatar billede 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/
Avatar billede 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.
Avatar billede fransker Novice
25. marts 2020 - 17:38 #9
Gud ja! Sorry, brainfart...  Arbejde hjemme er hårdere end jeg regnede med
Avatar billede 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/
Avatar billede 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. Der sættes "nofollow" på alle links.

Loading billede 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