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.


Omer Farooq
Omer Farooq
1,985 Points

i have a problem with hover element

i have a problem with hover element i created a hover element on an image and added a border on it when i hover over it image changes position i changes position because of it please i need help

1 Answer

Matthew Lang
Matthew Lang
13,471 Points

I believe you are experiencing a case in which your borders are being added onto your box's outside content. This can be changed with the box-sizing property, with value 'border-box'. This makes the box's (or images) width and height values include the content, padding and border values. For further reference, see here.

Also, here's a JSFiddle that demonstrates that behaviour.