show background-image on mouse over

css

Solution

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.

Problem

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.

Original source