CSS3 hover state background image size

Question

So, when I hover over a button on my new site a background image of an arrow appears. Works great. But, in Chrome (haven't tested it yet on other browsers) the first appears as a big arrow, and a second later it changes to the right size.

This is my site:

http://stilld.nl/nieuw/

This is the code i'm using:

HTML:

<a class="btn1" href="contact/"><h4>
            PLAN UW PROJECT
</h4></a>

CSS:

  .item a {
    text-decoration: none;
}

.item h4 {
    position: absolute;
    max-width: 200px;
    width: 100%;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    line-height: 43px;
    font-size: 16px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 28px;
    padding-right: 28px;
    margin-top: 0px;
    bottom: 180px;
    left: 8.5%;
    color: white;
    border-radius: 6px;
    letter-spacing: 0.5px;
    text-transform: none;
    border-style: solid;
    border-width: 1.5px;
    border-color: white;
    -webkit-font-smoothing:antialiased;
    background-position: 93% 50%;
    background-repeat: no-repeat;

  -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  transition:.5s;
}

.item h4:hover {
    position: absolute;
    max-width: 200px;
    text-align: center;
    width: 100%;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    line-height: 43px;
    font-size: 16px;
    left: 8.5%;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 46px;
    margin-top: 0px;
    color: white;

    background: url(../images/arrow_btn_banner.png) no-repeat;
    background-size: 30px 30px;

    background-position: 93% 50%;
    border-radius: 6px; 
    letter-spacing: 0.5px;
    text-transform: none;
    border-style: solid;
    border-width: 1.5px;
    border-color: white;
    -webkit-font-smoothing:antialiased;
}

I tried putten background-size above the background-image, but that doesn't work. I've tried changing the size of the image. But that isn't working either.

Answer 1

Maybe you should set background-image and background-size to 0 in h4 and only reset background-size on h4:hover, so bg image is already loaded.