Skip to main content

All Questions

0 votes
1 answer
97 views

Some SVG are not taking transition on :hover

My footer includes several SVG codes, some of them are from FontAwesome and some of them were converted to SVG path in AI. The issue I'm facing is that the SVG codes converted in AI are not taking any ...
Adam's user avatar
  • 45
1 vote
1 answer
73 views

How to apply hover to only the X not the circle

How would I be able to apply the hover transition to only the X and not the circle? How would that be done in the code? https://jsfiddle.net/c2sah0x6/ Only the X should change color on hover, not the ...
user avatar
0 votes
2 answers
138 views

Infinite SVG animation smoothly retrieve initial state on hover

I would like my infinite svg animation to pause on its initial or final state when I hover it. I tried with JS to remove the class or in CSS to set animation-iteration-count: unset; on hover or set ...
Pisk's user avatar
  • 3
0 votes
1 answer
68 views

SVG on hover: Image on hover SVG icon not working [duplicate]

I am working on a task. on the image when hover SVG icon is not working. I am stuck where I am incorrect. please, anyone, who can help to get this. and point me in the right direction. the link ...
Asiya Fatima's user avatar
  • 1,448
0 votes
5 answers
8k views

transition not working for svg path

CSS3 transition not working for the SVG path when using linearGradient animate. #loading-frame { transition: all 1s; /* fill: transparent; */ /* fill: blue; */ } #loading-frame:hover {...
Mo.'s user avatar
  • 27k
0 votes
1 answer
615 views

reverse svg animation when hover is over?

I simply want my svg lines to reverse their animation after the user stops hovering over the parent div switch executes it. There is a fair amount of code so I just made a jsbin: http://jsbin.com/...
Markus Hallcyon's user avatar
87 votes
2 answers
144k views

Using CSS to transition the fill property of an SVG path on hover

I'm including an SVG image file on my page within an object tag, like this: <object type="image/svg+xml" data="linkto/image.svg"> <!-- fallback image in CSS --> </object> The ...
David Alsbright's user avatar