Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

hover image

How to create a dark background with text on hover?

1 Answer

John Lack-Wilson
John Lack-Wilson
8,169 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.

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,169 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.