How do I change the background on mouse over immediately?

Question

We have a website with elements which have background images, and their parent has a different background image. On mouse over (:hover) the background changes to a specific color. The problem is that the change does not happen immediately, and for a fraction of a second the background becomes transparent and the parent background is visible. I want to make the change happen immediately, or at least make the background change from the image to the specific color without being transparent (if it's not transparent then I don't mind to keep the effect). How do we do it with CSS (I prefer without JavaScript)?

Here is our CSS code:

.main_block .items_block .items_container .thumbnail {
    border: 1px solid #cdced0;
    border-radius: 3px;
    padding: 5px 3px 10px;
    float: left;
    background-size: cover;
    background-position: center center;
}

.main_block .items_block .items_container .thumbnail:hover,
.main_block .items_block .items_container .thumbnail.active_thumbnail {
    border: 1px solid #FCC20F !important;
    background: #F9F158 !important;
    background-size: cover !important;
    background-position: center center !important;
}

.main_block .items_block .items_container .thumbnail {
    background-image: url([some url]);
}

By the way, without background-position: center center !important; in .thumbnail:hover, the background image also moves on mouse over.

possible duplicate of [CSS: Hover State images cache](http://stackoverflow.com/questions/4333695/css-hover-state-images-cache) — Liam, Feb 12 '14 at 13:02
[CSS sprites](http://davidwalsh.name/css-sprites) are your solutions. See question above. — Liam, Feb 12 '14 at 13:03
@Liam, We can't use sprites because the background images are uploaded by users and we can't modify them. — Uri, Feb 12 '14 at 13:28

score 0 · Answer 1 · answered Feb 12 '14 at 13:15

If the image isn't transparent you might try :

Regular state:

background: url("[some url]") no-repeat scroll 0 0 #F9F158;

Hover:

background: url("[some url]") no-repeat scroll -9999 -9999 #F9F158;

So that would basically just be moving the opaque image out of view to reveal the background color on hover.

If it does use transparency you might also try treating the whole thing as a spite and using the same basic technique to show your image first:

background: url("[some url]") no-repeat scroll 0 0 transparent;

And then move to a flat color field within the same graphic on hover:

background: url("[some url]") no-repeat scroll 100 0 transparent;

score 0 · Accepted Answer · answered Feb 12 '14 at 13:27

OK, there was an answer that was deleted although it was correct. This is the CSS that works:

.main_block .items_block .items_container .thumbnail {
    border: 1px solid #cdced0;
    border-radius: 3px;
    padding: 5px 3px 10px;
    float: left;
    background-size: cover;
    background-position: center center;
    -webkit-transition: 0s ease-in-out;
    -moz-transition: 0s ease-in-out;
    -o-transition: 0s ease-in-out;
    transition: 0s ease-in-out;
}

.main_block .items_block .items_container .thumbnail:hover,
.main_block .items_block .items_container .thumbnail.active_thumbnail {
    border: 1px solid #FCC20F !important;
    background: #F9F158 !important;
    background-size: cover !important;
    background-position: center center !important;
}

.main_block .items_block .items_container .thumbnail {
    background-image: url([some url]);
}

The only change is with the transition.

And that code add's mozilla, Opera and webkit specific transitions but not IE specific ones. Anyone using IE9 or lower will not see any change to your original question. — Liam, Feb 12 '14 at 13:32
It's a minor bug which only happens for a fraction of a second so if we can solve it for Google Chrome and FireFox, it's good enough. — Uri, Feb 12 '14 at 13:48

score 0 · Answer 3 · answered Feb 12 '14 at 13:44

If you can't use sprites I'd try something like this (exact soluton my differ as you've not posted your HTML):

I would simply change your structure

<div class="items_container">
   <span class="thumbnail"></span>
   <span class="hoverThumbnail"></span>
</div>

CSS

.main_block .items_block .items_container .thumbnail {
    border: 1px solid #cdced0;
    border-radius: 3px;
    padding: 5px 3px 10px;
    float: left;
    background-size: cover;
    background-position: center center;
}


.main_block .items_block .items_container:hover .thumbnail {
   display:none;
 }

.main_block .items_block .items_container:hover .hoverThumbnail,
.main_block .items_block .items_container .hoverThumbnail.active_thumbnail {
    border: 1px solid #FCC20F !important;
    background: #F9F158 !important;
    background-size: cover !important;
    background-position: center center !important;
    display:block;
}

.main_block .items_block .items_container .hoverThumbnail{
    background-image: url([some other url]);
    display:none;
}

.main_block .items_block .items_container .thumbnail {
    background-image: url([some url]);
    display:block;
}

so your showing and hiding different elements. this way both are loaded by the browser when the page loads.

score 0 · Answer 4 · answered Feb 12 '14 at 14:10

0

Try to change the css class name on mouse over instead of changing image url. define css with that classname

here is the fiddle jsfiddle.net/mannejkumar/6e89P/

answered Feb 12 '14 at 14:10

Jagadeesh

570
3
11

How do I change the background on mouse over immediately?

4 Answers4

CSS