Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS CSS Transitions and Transforms Getting Started with CSS Transforms Changing the Transform Position with transform-origin

Span

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!

Hi 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! :)

2 Answers

Hi! thank you! that makes sense :) not sure why I can't give points or put your answer as best answer? :(

Glad to help!

And it's the thought that counts. Haha

Enjoy your learning!

Haha well yes, but you deserved the points :P thank you again!