Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › can't get my link to do this vertical transition vertical [solved]
New Posts  All Forums:Forum Nav:

can't get my link to do this vertical transition vertical [solved]

post #1 of 3
Thread Starter 
hello everyone.
i have been stuck with a certain link i want to create for my menu. (for a personal learning project)

i want it to look like this but after spending half a day looking i still haven't found out how to do it....


i have used the css transition property to get a lot of different results but non make this one.
help will be much appreciated.
post #2 of 3
I've made an example here: http://jsfiddle.net/Tnt6200/hwrvd5q0/.

To start off, you need a background that is 200% the width of the element. Then you need to define a gradient for the background that, from left to right, is 50% blue and 50% yellow (or any other colours). Since the overall width of the background is 200% of the element, each color will be 100%.

Next, you need to change the background-position to -100% when the element is hovered over so that the second colour is shown.

Finally, you can set up the transition with the properties you want to change. There are no magic numbers for the transition durations, I just found that 0.5s and 0.25s looked pretty good. You could also try out some different timing functions to customize it further.
The Clunker
(11 items)
 
Lenovo Y40
(6 items)
 
 
CPUMotherboardGraphicsRAM
Core 2 Quad Q8400 Asus P5P43TD Powercolor 7950 4GB Patriot Viper 
Hard DriveHard DriveCoolingOS
80GB WD Caviar Blue 500GB WD Caviar Black Coolermaster Hyper TX Windows 7 Home Premium 64-bit 
MonitorPowerCase
20" Samsung Corsair CX600M Antec 300 
CPUGraphicsRAMHard Drive
i7-4510U R9 M275 2GB 8GB @ 1600MHz 500+8GB 5400rpm SSHD 
OSMonitor
Windows 8.1 14" 1080p 
  hide details  
Reply
The Clunker
(11 items)
 
Lenovo Y40
(6 items)
 
 
CPUMotherboardGraphicsRAM
Core 2 Quad Q8400 Asus P5P43TD Powercolor 7950 4GB Patriot Viper 
Hard DriveHard DriveCoolingOS
80GB WD Caviar Blue 500GB WD Caviar Black Coolermaster Hyper TX Windows 7 Home Premium 64-bit 
MonitorPowerCase
20" Samsung Corsair CX600M Antec 300 
CPUGraphicsRAMHard Drive
i7-4510U R9 M275 2GB 8GB @ 1600MHz 500+8GB 5400rpm SSHD 
OSMonitor
Windows 8.1 14" 1080p 
  hide details  
Reply
post #3 of 3
Thread Starter 
thanks you so much.
while i have yet to understand the code even with your explanations, i will adapt it to my site and play around with it to see the different effects it can give me.

you have my many many MANY thanks for your help.
i should know how to do this by now as a 20 year old student developer ^^'
New Posts  All Forums:Forum Nav:
  Return Home
  Back to Forum: Web Coding
Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › can't get my link to do this vertical transition vertical [solved]