Hi, I have an gear icon like this. It would be great is some can help me create a CSS code for circular shadow ripple when hovered on this icon.
I guess this code has something to do with effect I mentioned above. If you want to check live, please visit d3autos.com #sp-users-wrapper #users p.circle span { background-color: #F2F2F2; border-radius: 50% 50% 50% 50%; display: block; height: 70px; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -ms-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s; width: 70px; z-index: 4; } Code (markup):
Would you care to define what a "circular shadow ripple" even MEANS? Though you seem to have an image, and then want to throw CSS at it for... uhm... well... Yeah, I'm not getting what you are trying to do much less how you are trying to do it. That code snippet is gibberish since it's setting transition-durations without saying WHAT the transition is... much less targeting browsers that don't even take prefixes on transition...
@deathshadow Thanks for the reply. Could you please check d3autos.com where you can it live on icons next to it. It is right on the home page.
Wow, that's needlessly complex... that said, looks like a box-shadow and/or border animation chain -- NOT something really compatible with your choice of image; I'd dumb down that image to be more line-art like the existing buttons. Though really that's treading into "gee ain't it neat" garbage I'd probably not put on a site in the first place. It's cute, but it's not worth the code. I'll take a deeper look tomorrow and see if I can isolate what's making that work, and try and make a standalone to explain it to you so you can make something similar and/or apply the same effect/code to your image... (admittedly I say the same thing about that giant pointless full screen width image slider, and, well... the ENTIRE codebase of that page) Though that image does need to be redone and/or tossed for something compatible with the effect.
Thank you. Those images are temporary. I am doing this for a friend who want to start his on service center. The current format matches his taste. So all I can do is take it forward as it is he who would be using the site. Wish I could give you a like