How to add a transition (fade-in) in this example?

Question

How to add a transition (fade-in) in this example?

Navigation

#1 by (0 votes)

0

I have a site that when you hover over the item there is a photo exchange. but this exchange is immediate. I would like to add a transition effect, type a hover transition 1s. it's possible? I am using mouseover and mouseout.

I call this method to change photo.

function mudaFoto(foto){
    document.getElementById("icone").src = foto;
}

javascript html5 css

asked by anonymous 10.03.2017 / 23:53

1 answer

Query return specific array of mongodb documents When and why should a static method be used? [duplicate]

score 0 · Accepted Answer

Following the idea of Antonio Alexandre, I made this small example using only CSS:

.image {
  position: relative;
}
.image img {
  position: absolute;
  top: 0;
  left: 0;
}
.image img:nth-child(1) {
  z-index: 1;
  transition: 1s;
}
.image img:nth-child(1):hover {
  opacity: 0;
}
.image img:nth-child(2) {
  z-index: 0;
}

<div class="image">
  <img src="https://placeholdit.imgix.net/~text?txtsize=32&bg=55c1e7&txtclr=ffffff&txt=IMAGEM%201&w=200&h=200"><imgsrc="https://placeholdit.imgix.net/~text?txtsize=48&bg=55c1e7&txtclr=ffffff&txt=IMAGEM%202&w=200&h=200">
</div>

In short, within <div class="image"> , the two images are with position: absolute; , occupying the same space and position.

With z-index , set which image would overlap the other. The one above, takes the attribute transition: 1s; .