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
Stephanie Roberts
16,757 PointsImage won't hover!
I have created a logo for my portfolio and I will not hover in the css.
HTML
<h1 class="grid-2 main-logo hide-mobile"><a href="home.html"><img src="img/logo.png"></a></h1>
CSS .main-logo img:hover { background-image: 'img/logo_hover.png'; }
Could someone please help and tell me what I am doing wrong please?
9 Answers
Stephanie Roberts
16,757 PointsHTML
<h1 class="grid-2 main-logo hide-mobile"><a href="home.html"><img src="img/logo.png"></a></h1>
jne
12,613 PointsAre you sure your path is correct. Does the image have a clas of .main-logo? If so the correct use would be .main-logo:hover{background-image:"img/logo_hover.png";}, without the img.
jne
12,613 PointsI see you html now. Add a class to your img, something like <img class="image" src="img/logo.png"> and use the css I provided above. That should work
Stephanie Roberts
16,757 PointsI changed it to this
<h1 class="grid-2 main-logo hide-mobile"><a href="home.html"><div class="logo"><img src="img/logo.png"></a></div></h1>
It still isn't working
jne
12,613 PointsU don't need that div. Simply use html
<img class="image" src="img/logo.png">
css
.image:hover{background-image"img/logo_hover.png";}
If that doesn't work your path is wrong or maybe your image is a .jpg instead of a .png or something like that?
Stephanie Roberts
16,757 PointsOkay thank you, I will try this now
Stephanie Roberts
16,757 PointsIt still isn't working :(
jne
12,613 PointsThe mistake is that an image doesn't have a background, it have a src. So to do this i css you would do like:
.image{content:url("path");}
jne
12,613 PointsYou can go back to your original css setup and write content:url("path"); insted of a background property.
Took me some time to remember that image doesn't have a background but a image. So you would set the conent/src and not background. it would be correct to use background if you were to set a background on a div, but a tag like img need content to edit the image.
img:hover{content:url("path");}
I guess your original css would work with content instead of background
.main-logo img:hover { content: url'img/logo_hover.png'; }
Stephanie Roberts
16,757 PointsThe hover is working now but the hover image isn't showing
Stephanie Roberts
16,757 PointsGot it working! Thanks for all your help