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 Creating a Slide Transition

My transition doesn't run smooth. What is wrong?

When the photo slides on the X axis 100% to the right, there is a white space between the photo and the photo-overlay that is returning from 100% to the left, to 0.

I haven't changed any of the default HTML or anything on main.css

Do you notice anything wrong?

Thanks

/* -- Row 3 --------- */

.slide .photo-overlay, 
.slide img {
  transition: transform 0.6s ease-out;
}

.slide .photo-overlay {
  transform: translateX(-100%);
}

.slide:hover .photo-overlay {
  transform:translateX(0);
}

.slide:hover img {
  transform:translateX(100%);
}
Steven Parker
Steven Parker
216,000 Points

To facilitate a complete and accurate analysis, make a snapshot of your workspace and post the link to it here.

Update -

I changed the transition-duration from 0.6s to 0.4s and the white space went away.

There's something odd about not being able to make the transition slower, if one wants to, without compromising the design aesthetic though, no?

Thanks again

Okay will do Steven, thanks

Hey Steven,

I took a snapshot for you to look at -

https://w.trhou.se/0d8y39a40r

Thanks again -

1 Answer

Steven Parker
Steven Parker
216,000 Points

On line 48 of interactions.css, there's a "transition: transform .6s;" setting in the rule for ".photo:hover img" that's not shown in the video. Since this rule has a higher specificity than the one that sets the transition values for the 3rd row, it takes precedence and controls the the image transition speed.

There are several ways to address this issue:

  • remove the transition setting on line 48
  • change the class assignments to make the rules for rows 2 and 3 mutually exclusive
  • add an explicit selector for ".slide:hover img" to the row 3 transition setting
Gari Merrifield
Gari Merrifield
9,558 Points

I believe you are correct about the specificity, but I don't think that is the problem that ramseydennis is talking about. I get a little white line that flickers through the movement between the image and the overlay, and I don't have this extra line of CSS. But adding the extra line, and giving it a slightly slower transition, it appears to compensate for the problem that is causing the white line, at least when hover starts. This also has the effect of making the white line more obvious when the hover ends. So I think we are just looking at an artifact.

If you would like to try my workaround for it, add to your interactions.css the following code, adding a small box-shadow to the left side of the image :

.slide img {
  box-shadow: -2px 0 #345d88;
}