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!

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


hover image

How to create a dark background with text on hover?

1 Answer

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'.


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