Hover with picture

Question

There was no way, the arrows of the slider of the project will have to be in png.

Today I’m doing so (part of the code):

.banner_home_inferior .owl-next {
  right: -6px;
  background: url(/images/setas_novas.png) no-repeat !important;
  background-position: -55px 0px !important;
  height: 89px !important;
  width: 48px !important;
  display: inline-block !important;
  margin-top: -44.5px !important;
  top: 50% !important;
  font-size: 0 !important;
}

.banner_home_inferior .owl-next:hover {
  background: url(/images/setas_novas_hover.png) no-repeat !important;
  background-position: -55px 0px !important;
}

However, when passing the mouse for the first time, it has a delay to exchange images.

Is there any technique of making an image that displays the top and when passing the mouse, displays the bottom?

Answer 1

Yes there is a technique, flame Sprite and you do it by changing the background-position, however the images need to be in the same . png or . jpg etc...

This is the image that I will use in the example, note that it has several images in one. And :hover using the background-position I’ll trade them in.

See the practical example

div {
    background-image: url("https://i.stack.imgur.com/1HLqp.png");
    background-position: 0px -125px;
    height: 46px;
    width: 46px;
    display: inline-block;
    cursor: pointer;
}
div:hover {
    background-image: url("https://i.stack.imgur.com/1HLqp.png");
    background-position: 0px -77px;
}

<div></div>

Option number 2, I don’t know what your png design looks like, but you can have both images at the same time in the same place. And :hover you da display:none the one above. (as the two are already there only that one covering the other there should be no delay in the exchange)

Take the example.

.troca {
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    cursor: pointer;
}
img {
    position: absolute;
}
.troca:hover .hide {
    display: none;
    opacity: 0;
}

<div class="troca">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRk7blGqe86mAzrflraWsET4_zPz_3JsVH40wzY2tzrBu7phhC7" alt="">
    <img class="hide" src="https://png.icons8.com/ios/2x/arrow-filled.png" alt="">
</div>

Answer 2

The technique is as @Hugocsl said in his reply. What you should do is create a single image with the two images (sprites) together, one next to the other or one on top of the other.

By passing the mouse, you will simply change the background position in the x-axis (if the sprites are side by side) or in the y-axis (if they’re on top of each other).

In my example I will show an Sprite next to the other, changing the position on the X axis, as shown in the image below:

Example:

.banner_home_inferior .owl-next {
  right: -6px;
  background: url(http://dvdteste.hospedagemdesites.ws/hoverimg.jpg) no-repeat !important;
  
  /* o background-position abaixo é opcional
  já que o background já é posicionado naturalmente
  no topo e à esquerda*/
  /*background-position: 0 0 !important;*/
  height: 89px !important;
  width: 48px !important;
  display: inline-block !important;
  /* margin-top: -44.5px !important; */
  top: 50% !important;
  font-size: 0 !important;
}

.banner_home_inferior .owl-next:hover {
  background-position: -48px 0 !important;
}

<div class="banner_home_inferior">
   <div class="owl-next"></div>
</div>