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
John Levy
1,451 PointsCan you choose if a thumbnail image moves to the left or right when it enlarges when hovering over it?
I have three thumbnail images that I want to enlarge when the user hovers over it. I figured how to enlarge the images when the user hovers over it but the first image is on the left side of the page so when it enlarges half the image is of the page. Is there a way to make the image enlarge slightly to the right so the enlarged image is not of the page? Also the first thumbnail enlarges but only if I hover over it at the bottom of the thumbnail. What could be the problem causing it not enlarging when I hover over the top of the first thumbnail? Here is the code I used- http://codepen.io/Johned22/pen/vKzAyd Thanks in advance
2 Answers
Steven Parker
243,344 Points
You can add a translate to your transform to shift it.
For example, this will move the image to the right as it expands:
.thumbnail1:hover {
transform: scale(1.5) translateX(50px);
}
To go left, just use a negative offset.
I didn't see the problem with hovering on top, but if you have other elements than what you supplied in the test CodePen, you might have an overlap issue.
John Levy
1,451 PointsThanks, that worked great