Same anon again, sorry. I'm just not getting it and I'm just about ready to throw my laptop out the window, I'm so frustrated! What I meant was that in your theme the colour seems to slide out from left to right versus just the whole box changing colour simultaneously as you usually see. Maybe its an effect or something, but I can't figure it out and its bugging me so much arghh. I don't even know how to ask the question properly.
hi there anon,i do understand the frustrations of coding, believe me!!!
tutorial time :3
how to make a ‘sliding’ background hover effect on your links!
here’s a step by step that will hopefully help and explain the parts to animate! you can’t usually animate a background unless you’re changing the position of it, which rarely works well for a solid color change (you CAN use gradients to do this, but that’s another story for another time, i find box-shadows are the easiest way to go! ) - so what you’ll need to animate in this case is a box-shadow.
what’s a box shadow? – usually a box shadow creates a shadow behind an item.
example;
but in this case, what we want to do is create the box-shadow INSIDE the item - example;
what we’re going to do here, is animate the box shadow so that it doesn’t just appear around the outside of the object, but completely ‘fills’ the space - and this will give us a ‘fake’ background which we can animate! for this we use the code ‘box-shadow:inset’ for the shadow inside of our box!
here’s our basic css for the links…
#links { display:block;}
#links a { padding:3px; margin-bottom:3px; display:inline-block; width:200px; background:#fff; box-shadow: inset 0 0 0 0 #31302B; -webkit-transition: all ease 0.8s; -moz-transition: all ease 0.8s; transition: all ease 0.8s;}
note that we’ve included a box shadow inset for the links - this and the inset is applied at 0 0 0 0 values (meaning we can’t see it!
now we add in the same box shadow to the link hover, but this time, we make sure it’s going to ‘fill’ the link (i.e. the same width plus any padding!) and it will animate using the ‘ease’ transition.
#links a:hover { box-shadow: inset 206px 0 0 0 #31302B;}
this is the effect we get
it’s very easy to change this up to have different effects! if we alter the inset size to a minus value, then the shadow will slide in from right to left, rather than left to right…
#links a:hover { box-shadow: inset -206px 0 0 0 #31302B;}
or top to bottom…
#links a:hover { box-shadow: inset 0 30px 0 0 #31302B;}
…or diagonal, corner to corner…
#links a:hover { box-shadow: inset 206px 30px 0 0 #31302B;}
just change the box shadow insert to get different effects!
NB/ your box shadow doesn’t have to be grey! just change the hex value to whatever colour you like!
that should do it!
hope this helps - if it does a like or reblog is always appreciated :3
