Hover with image [duplicate]

Question

Hover with image [duplicate]

Navigation

#1 by (2 votes)
#2 by (2 votes)

2

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

Today I'm doing this (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 you hover the mouse for the first time, you have delay to change the images.

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

html css

asked by anonymous 17.05.2018 / 22:36

2 answers

score 2 · Answer 1

If there is a technique, it calls Sprite and you do changing background-position , but the image must be in the same .png or .jpg etc ...

ThisistheimageI'mgoingtouseintheexample,notethatithasmultipleimagesinone.Andin:hoverusingbackground-positionI'llchangethem.

Seethepracticalexample

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 do not know what the design of your png looks like, but you can have both images in the same place at the same time. And in% w / w% of% w / w% on top. (as the two are already there only one covering the other should not be delayed in the exchange)

See 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>

score 2 · Answer 2

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

When you move the mouse, you will simply change the background position on the X axis (if the sprites are side by side) or the Y axis (if they are one on top of the other).

In my example I will show a 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>