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
FNU Christian
5,549 PointsWhy does this btn:hover makes it lighter color
Hello,
I don't understand. In the code, we make that button class to have a background image of texture.png. This is an image and not a color.
However, in the btn:hover class we put a hexadecimal color.
My expectation is that this button (with background texture) will change into color when we hover our mouse on it, because we put a background color and not texture. But it turns out that the image texture stays there, only with lighter color.
How does this work?
5 Answers
Jennifer Rai
Courses Plus Student 13,164 PointsHi Christian,
Based on that code, Anthony is correct : )
There is no separate background image listed for the button hover (.btn:hover), so if you are still seeing the texture, and not just a solid color, than it means that the "texture.png" must have some transparency as Anthony mentioned above.
In the static state you are seeing the semi-transparent texture.png image and are able to see the teal color (#4FB69F) behind it. When you hover over it, you are still seeing the semi-transparent texture.png image, but now you see the lighter teal color (#4CC4A7) behind it. So the only thing that is changing is the color behind the png image. Does that make sense?
To test it out, you can change the button hover to a completely different color and you should see that color behind the texture. For example if you change:
.btn:hover { background-color: #4CC4A7;}
To this:
.btn:hover { background-color: #990000;}
It should be a red color. Hope that helps!
Anthony Hind
5,715 PointsIt may have something to do with using a PNG image as they have transparent backgrounds so the hexadecimal colour would maybe come through when hover is applied as the image is transparent.
I have not gone over the video yet in a long time but I think this maybe what method the tutors have gone for, I will have another look at the video and maybe help give you a better solution :)
FNU Christian
5,549 PointsHi Anthony,
If my understanding is correct, the code background: #4FB69F url('img/texture.png') is not presenting both the image and the color, but first - the image, and if the image is not present, then the color. So technically, because the image is present, the active code should be the image. But when it comes to the hovering part, the image becomes lighter. Which I don't understand why, because technically it supposed to change to color. Am I right?
.btn { color: #FAF3BC; background: #4FB69F url('img/texture.png') no-repeat right top; padding: 15px 30px; margin: 40px 0px; border-radius: 25px; text-transform: uppercase; }
.btn:hover { background-color: #4CC4A7; }
Jennifer Rai
Courses Plus Student 13,164 PointsHi Christian,
Can you paste in the code you are talking about?
It is hard to say for sure without seeing your code, but it is common to put a backup color into the css in case a background image fails to load for some reason.
FNU Christian
5,549 PointsHi Jennifer,
This is the code that I used
body { font-family: 'Nunito', sans-serif; color: #FAF3BC; background: #420600 url('img/bg-texture.jpg') repeat; }
a { color: #4FB69F; text-decoration: none; }
h1 { font-size: 1.750em; letter-spacing: -1.5px; }
h2 { font-size: 1.5em; color: #B4C34F; }
.btn { color: #FAF3BC; background: #4FB69F url('img/texture.png') no-repeat right top; padding: 15px 30px; margin: 40px 0px; border-radius: 25px; text-transform: uppercase; }
.btn:hover { background-color: #4CC4A7;
FNU Christian
5,549 PointsAh I see Jennifer. So this code .btn { color: #FAF3BC; background: #4FB69F url('img/texture.png')
Is basically presenting both COLOR and BACKGROUND IMAGE.
Thanks for the explanation!
Jennifer Rai
Courses Plus Student 13,164 PointsYou got it!