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

Posted by ramseydennis
ramseydennis
4,530 Points

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
231,236 Points
Steven Parker
Steven Parker
231,236 Points

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

ramseydennis
ramseydennis
4,530 Points

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

ramseydennis
ramseydennis
4,530 Points

Okay will do Steven, thanks

ramseydennis
ramseydennis
4,530 Points

Hey Steven,

I took a snapshot for you to look at -

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

Thanks again -

1 Answer

Steven Parker
Steven Parker
231,236 Points
Steven Parker
Steven Parker
231,236 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,598 Points
Gari Merrifield
Gari Merrifield
9,598 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;
}