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
Sara Parker
2,238 PointsHelp with navigation
Hi,
I'm trying to make a navigation where there are three different images that are placed horizontally in the center of the page, and when you hover over the icon a black field is supposed to appear over the icons. As it is just now, the the black field is appearing under the icon and I do not know how to solve the problem.
I also wonder if anyone has any tips for improvement for other things in my code. I understand that there are several things in the code that's not right. And maybe there are more stuff I could have done easier for myself as well.
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade
This is a link to the page I used for the image overlay fade.
1 Answer
Steven Parker
243,656 PointsHi again, "sis",
You've set absolute positioning on your overlay, now you just need to provide values to position it where you want it:
.overlay {
position: absolute;
top: -30px; /* position of top edge */
left: -30px; /* posttion of left edge */
/* ... */
Sara Parker
2,238 PointsYo Bro,
Thanks a lot!
I'm also struggling to get my overlay to cover the icons. Do you know how to do it?
Steven Parker
243,656 PointsI thought that was the original point. After making the changes I suggested, the overlays do cover the icons.
gaurav bhardwaj
Courses Plus Student 1,381 Pointsgaurav bhardwaj
Courses Plus Student 1,381 Pointshttps://teamtreehouse.com/library/creating-a-slide-transition
check this may be it can help