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

Asked

Viewed 79 times

0

I have a website that when you hover over the item there is a photo exchange. however this exchange is immediate. would like to add a Transition effect, like a Hover Transition 1s. is it possible? I’m ultilizando the mouseover and mouseout.

I call this method to change photo.

function mudaFoto(foto){
    document.getElementById("icone").src = foto;
}
javascript css html5
  • 1

    Idea: Use two Divs, one over the other, each with an image, positioned like this with CSS. With CSS3 you do the top part of the Hover to make a transition to opacity 0. I would make an example for you if I had in front of the computer and with free time, but I’m writing from the cell and I’m stuck with my TCC. At least I leave this idea for if you want to try to go this way or for whoever tries to answer the question using this way. Changing the src I just don’t know if it would be possible.

1 answer

0


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">
  <img src="https://placeholdit.imgix.net/~text?txtsize=48&bg=55c1e7&txtclr=ffffff&txt=IMAGEM%202&w=200&h=200">
</div>

In short, within the <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 on top takes the attribute transition: 1s;.

Browser other questions tagged javascript css html5

You are not signed in. Login or sign up in order to post.