Help with Image sprites hover effects

[inFamousBabe]

I have a problem with hovering.I used 2 img(png format) for sprites.I used a img for a link but after using sprites effect that link is gone,its just effects without link function.Any1 know solution for this?
html code

<div class="cena">
          <ul class="cena-proizvod">
            <li class="gramaza">25 kg</li>
              <li class="naruci-dugme"><a href="#"><img src="img/kolica.png"></a></li>
            <li class="iznos"> 126.60 €</li>
          </ul>
        </div>

css code

.naruci-dugme {
  width: 49px;
  border: px black solid;
  border-radius: 100%;
  border-image-repeat: stretch;
  margin-right: 30px;  
}

.naruci-dugme{
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  content: url('../img/kolica.png');
}

.naruci-dugme:hover, .naruci-dugme:focus, .naruci-dugme:active{
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
  content: url('../img/circle4599.png');
}

am using a bootstrap for this

[WebMachine]

Hi, @inFamousBabe. Your Html is missing. Could you please format your code properly by placing three backticks (```) on the line before the code, and three backticks on the line after the code. Or alternatively, highlight the code and click on the </> icon that is above the edit area. Thanks.

[PaulOB]

@inFamousBabe

I have a problem with hovering.

Hi,

I can’t work out what you are trying to do here exactly?

What is supposed to happen to your image on hover? Are you scaling the image and then changing it to another image at the same time. I’m not sure why you have three images for this either?

I can tell you that your use of the content property is incorrect and the content property only applies to ::before and ::after pseudo elements. It does not apply to anything else. Although it actually looks like chrome is behaving strangely here and replacing the content in the div with the content from your content properly and that is clearly a bug as no other browsers do this.

If you want to change images on hover the use background images and change them with the background property and not the content property. If you have reasons for using the content property then you need to do in conjunction with :after or :before.

e…g.

.test:after{
content:"this is generated content";
}