moesphemie moesphemie - 5 months ago 50
CSS Question

SVG Background-Image strange transition behavior on hover

I have a button with an svg as a background. The

:hover
selector works fine but when I give it a transition, the button first gets smaller and then jumps back to the original size. How do I stop this behavior?

here's my code:



a {
width: 250px;
display: block;
color: rgba(0, 0, 0, .9);
text-decoration: none
}
.prod-ueber .cta-wrapper {
position: absolute;
left: 310px;
width: 100px;
top: 45px;
z-index: 5
}
.info-btn,
.korb-btn {
width: 50px;
height: 50px;
background-repeat: no-repeat;
background-size: 100%;
float: left;
transition: background .4s ease;
}
.info-btn {
background-image: url(http://imgh.us/info-btn.svg);
}
.korb-btn {
background-image: url(http://imgh.us/korb-btn.svg);
margin-left: 12px;
}
.info-btn:hover,
.info-btn:active,
.info-btn:focus {
background-image: url(http://imgh.us/info-btn_h.svg);
}
.korb-btn:hover,
.korb-btn:active,
.korb-btn:focus {
background-image: url(http://imgh.us/korb-btn_h.svg);
}

<a href="#">
<div class="prod-ueber">
<img src="http://dummyimage.com/" height="290" width="426" alt="Minze" class="img-responsive">
<h3 class="Artikelname">Malve</h3>
<small>Description</small>
<hr>
<h5 class="preis">€ 1,79</h5>
<div class="cta-wrapper">
<a href="#" class="info-btn"></a>
<a href="#" class="korb-btn"></a>
</div>
</div>
<!-- produkt -->
</a>




Answer

You can use a workaround by adding background-image for the pseudo element

a {
  width: 250px;
  display: block;
  color: rgba(0, 0, 0, .9);
  text-decoration: none
}
.prod-ueber .cta-wrapper {
  position: absolute;
  left: 310px;
  width: 100px;
  top: 45px;
  z-index: 5
}
.info-btn,
.korb-btn {
  width: 50px;
  height: 50px;
  background-repeat: no-repeat;
  background-size: 100%;
  float: left;
  position: relative;
  overflow:hidden;
}
.info-btn {
  background-image: url(http://imgh.us/info-btn.svg);
}
.korb-btn {
  background-image: url(http://imgh.us/korb-btn.svg);
  margin-left: 12px;
}
.info-btn:before,
.korb-btn:before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  background-size: 100% auto;
  opacity: 0;
  transition: .4s ease;
}
.info-btn:before {
  background-image: url(http://imgh.us/info-btn_h.svg);
}
.korb-btn:before {
  background-image: url(http://imgh.us/korb-btn_h.svg);
}
.info-btn:hover:before,
.info-btn:active:before,
.info-btn:focus:before {
  opacity: 1;
}
.korb-btn:hover:before,
.korb-btn:active:before,
.korb-btn:focus:before {
  opacity: 1;
}
<a href="#">
  <div class="prod-ueber">
    <img src="http://dummyimage.com/" height="290" width="426" alt="Minze" class="img-responsive">
    <h3 class="Artikelname">Malve</h3>
    <small>Description</small>
    <hr>
    <h5 class="preis">€ 1,79</h5>
    <div class="cta-wrapper">
      <a href="#" class="info-btn"></a>
      <a href="#" class="korb-btn"></a>
    </div>
  </div>
</a>

Comments