Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Igor Pavlenko
12,925 Pointsanimate light on
hey guys! im working on project and i have one challenge
i have a photo of a ligh bulb next to one of my navigation links and i want to make an effect of it turning on when hover over the link. What will be the best and easiest way to accomplish that ?
Thanks in advance
3 Answers
Botos Claudia
Front End Web Development Techdegree Graduate 18,765 PointsOr you could best try to change the light bulb from a photo to an SVG, I think it will do the job better as you can animate it using Css transition and transform , so that when you hover on it, you will apply a transition to slowly make the bulb yellow or white, thus giving that awesome effect of a bulb turning on.
Salvador Cervantes
10,898 PointsJust a thought and I don't know if this is best practice, but you could create a Jquery function stating something along the lines of changing the image on hover to the image with the light on and return to the old image when hover is off.
I don't know if that helps.
Salvador Cervantes
10,898 PointsHow many Programmers does it take to change a light bulb...... lol
Luke Pettway
16,593 PointsLuke Pettway
16,593 PointsI like this approach as it will also help to reduce flash of unstyled content (FOUC) due to having to load the second image. Plus like Popa said, you also get to animate the SVG itself which you can do a lot more fluidly.