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

CSS CSS Transitions and Transforms Getting Started with CSS Transitions The Transition Challenge Solution

Posted by vamosrope14
vamosrope14
14,932 Points

Why don't we apply the transition property and transition duration value to the hover rule instead?

.

2 Answers

Rebecca Morris
seal-mask
.a{fill-rule:evenodd;}techdegree
Rebecca Morris
Front End Web Development Techdegree Student 24,092 Points
Rebecca Morris
.a{fill-rule:evenodd;}techdegree
Rebecca Morris
Front End Web Development Techdegree Student 24,092 Points

It depends on the effect you're going for. If you want the transition to occur for both hover on and hover off, you need to apply the transition properties to .photo-overlay. If you want the transition to occur for hover on only, you would apply the transition properties to .photo-overlay:hover.

Brad Chandler
Brad Chandler
15,301 Points
Brad Chandler
Brad Chandler
15,301 Points

I was wondering the same thing. If you apply the transition rules to the :hover class, the effect will not fade back to opacity: 0; From what I understand this is because the :hover rule is only applied when you are hovering the element. So when you move the pointer away from the element, the rule is no longer applied and the transition properties are destroyed. The method of applying transitions to the class that always exists ensures that the transitions are there for the duration of the interaction.