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
Amanda Bater
7,686 PointsHow come overflow: hidden isn't working?
Just been doing the tutorials for transitions and transforms, and thought I'd put them to use in a personal project. I want to set the overflow to hidden so that when I hover over a thumbnail I get a zoomed-in effect without the image taking up any more space on the page.
I've looked at the html and css that was already written the tutorials workspace and have compared it to my own...I don't understand why the overflow is not hidden for me. I've tried added overflow: hidden to '.thumb', '.thumb img', '.image-container'...just to see if I'd put it in the wrong place, but so far nothing has worked.
I'm sure it's just a simple error, I just need another pair of eyes on it I think. Any help appreciated!
2 Answers
Mahmood Bawazir
Front End Web Development Techdegree Graduate 17,567 PointsHi theres a few things wrong here,
- You need to set
overflow: hidden;on the image container which in this case is called 'thumb', not the image. - And the width and height should be set to the container, not the overlay you can just delete that.
- And use margin instead of padding to seperate the images.
- And set the line-height to 0.
So heres the code:
thumb { position: relative; overflow: hidden; max-width: 260px; max-height: 100%; line-height: 0; margin: 25px auto; }
Hope that helps.
Amanda Bater
7,686 PointsYes!! Thank you!
Mahmood Bawazir
Front End Web Development Techdegree Graduate 17,567 PointsNo problem!
Amanda Bater
7,686 PointsAmanda Bater
7,686 Pointshttps://w.trhou.se/er19whtc3g
Code snapshot posted above ^^^