show background-image on mouse over

Question

I have the folowing HTML:

<a href="#" class="home-block" style="background-color:#464646; background-image:url('wardrobe.jpg')">Wardrobe</a>
<a href="#" class="home-block" style="background-color:#6a0d1f; background-image:url('wine.jpg')">Wine</a>
<a href="#" class="home-block" style="background-color:#291407; background-image:url('coffee.jpg')">Coffee</a>

This is the relevant CSS:

.home-block {
    background-color: #c2b89c; display: block; height: 180px; line-height:180px;
    text-align: center; font-size: 70px; color:#e2e2e2;
    text-shadow: 2px 2px 0 #444; margin-bottom: 20px; background-size: cover;
    background-position: center center; box-shadow: 1px 1px 4px #111;
}

My result now looks something like this:

That's OK, but what I really want is the blocks to have a solid color, and only show the image on hover. Like so:

Please keep in mind that I'm using a responsive design, so the blocks will have a different size and aspect ratio on different screen sizes. That is why I'm using background-size: cover. Also this is for a CMS system, so I want the images and colors to be set inline in the HTML, so it will be easily editable and more blocks can be added.

So I basically need a clean solution without absolute positioned elements (because they tend to break if there's no fixed width) to achieve this.

What I have tried is this:

.home-block { background: none; }
.home-block:hover { background: inherit }

but with no success. I was just about to fix all of this with some lines of jQuery, but I just quickly wanted to check if there is no pure CSS way to achieve this.

Answer 1

It's a little bit tricky if you need to have background-image set inline in HTML. You can't overwrite it easily. What I would try to do is to change background-position on hover:

.home-block {
    ...
    background-position: 1000px 1000px; // background-image is there but not visible
}
.home-block:hover {
    background-position: center center !important; // make it visible
}

http://jsfiddle.net/h2Jbg/

So for normal state you will not see background image but will see backgroud color. On hover you move image back.

Answer 2

Unfortunately it's not possible to use the :hover pseudo-class inline, which makes it hard to accomplish this inline on a single element.

It is often a bit ugly to use an additional element for the purpose of styling, but at least it is a possible solution to the problem at hand.

<div style="background-image: url(http://lorempixel.com/400/200);">
   <div class="home-block">Foo</div>
</div>

You could then use something like this in your CSS:

.home-block:hover {
    background: transparent;
}

Demo

This way, you will be able to add new blocks with individual background-images, without updating the stylesheet.