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 trialSilvia Ramos
Front End Web Development Techdegree Graduate 18,318 PointsSpan
Hello! Why does he use a span in order to wrap these images in a class? can't he add the class in the images tags itself?
Thank you!
3 Answers
Clinton Hays
Front End Web Development Techdegree Graduate 18,156 PointsHi Silvia!
The span is wrapped around the img simply to provide a reference for the original position of the img. If we apply the "original-pos" class to the img, the transforms we apply to the img will also be applied to the "original-pos" class. We can see this in action by adding a red border to the "original-pos" class and moving the class from a span to the img element:
.original-pos {
background-color: lightgrey;
height: 100%;
+ border: 2px solid red;
display: block;
line-height: 0;
}
<img + class="original-pos" src="img/photos/1.jpg" alt="Big Sur">
With these changes applied, you can see that the first image has a red border while the second and third image just have the red border surrounding the span behind them. Using a span around the img element just ensures it has the same dimensions and position as the element it surrounds. Then we can target the two elements separately in CSS. I hope this helps!
Happy coding! :)
Silvia Ramos
Front End Web Development Techdegree Graduate 18,318 PointsHi! thank you! that makes sense :) not sure why I can't give points or put your answer as best answer? :(
Clinton Hays
Front End Web Development Techdegree Graduate 18,156 PointsGlad to help!
And it's the thought that counts. Haha
Enjoy your learning!
Silvia Ramos
Front End Web Development Techdegree Graduate 18,318 PointsHaha well yes, but you deserved the points :P thank you again!