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

CSS

Posted by Ramesh Kunwar
Ramesh Kunwar
Courses Plus Student 4,066 Points

hover image

How to create a dark background with text on hover?

1 Answer

John Lack-Wilson
John Lack-Wilson
8,181 Points
John Lack-Wilson
John Lack-Wilson
8,181 Points

There's a few ways to get what I think you're looking for, but specifically with CSS you will want to use ':hover'.

Example:

.hoverBox {
    background-color: white;
    color: black;
}

.hoverBox:hover {
    background-color: black;
    color: white;
}

The above code will change the element with class hoverBox from a white box with black text to a black box with white text on a hover.

Ramesh Kunwar
Ramesh Kunwar
Courses Plus Student 4,066 Points

Yeah, I understand this but my image should contain nothing when it is in normal condition. But when I hover the image it should overlap the image with text.

John Lack-Wilson
John Lack-Wilson
8,181 Points
John Lack-Wilson
John Lack-Wilson
8,181 Points

Just so that I understand what it is you're looking for, you want an image to be overlayed with text when it is hovered?

One way you could do it would be:

.hoverImage {
    color: rgba(0,0,0,0) /* This sets the text to be transparent */
}

.hoverImage:hover {
    color: rgba(0,0,0,1) /* Fully visible text
}

There's also a content property that you could use, link for how it's used here, however I think the previous transparency method is easier to implement.