How to preload css :hover background images


Tags: css,image,load

Problem :

I am making a Wordpress website and some the buttons have a background image, and the image changes on hover. This is done through just simple CSS. When the user first goes to the page and hovers over a button, the space goes blank until the new image loads.

What is the best way to load all the images so it has a smooth transition.

P.S There is only max 2 buttons per page



Solution :

You can use "Sprite" images for your buttons. Thus all button, normal bg and hover bg will remain in an image. And that image will load initially with the button normal state. For hover, you have to use same sprite image, but different background-position in css.


    CSS Howto..

    How to make a Sass mixin declare a non-nested selector on base level?

    How to move the Google Chart's annotation to the top or anywhere with CSS?

    How to make an invisible character in HTML, that still get's picked up on text selection?

    How to rotate a div

    Prestashop - How to edit views [closed]

    CSS & Button: How to override native CSS of html buttons element?

    How to inject a css class into an MvcHtmlString?

    How to only get the 'box-shadow-right' that cuts off when you reach a border?

    How to fix on Mobile Devices? Custom CSS. (Wordpress)

    How do I use Controller specific stylesheets in Rails 3.2.1?

    How to add a color in the
    bottom content area?

    How to set select icon bigger

    How to bump up text?

    How to divide a border into 4 equal parts?

    How to get Owl Carousel Owl-Page (dots) Responsive

    How to neaten css shapes?

    css: how to remove pseudo elements (after, before, …)

    How do I set a block of text to drop to a new line all at once?

    Google App Engine: how to use the internal CSS in the template?

    How to stop Navigation bar list from changing position?

    How to add border inner side of image using CSS

    CSS: How can I force a display: table-cell box to have a fixed width of 50%?

    How to have different layout orders for same html code for desktop and desktop using css or javascript (not jquery)

    How to keep nav bar from shifting elements to next line when zooming in?

    DOM: How to set element width based on iterator value and call a function on mouseover?

    Keyboard Showed messed up elements' position

    How to set width of a
    in CSS to X number of pixels less than the width:auto?

    how to get rid of firefox image border

    How to place a css counter-increment below a paragraph of text?

    How to precisely center bootstrap grid in html page?